adjust map to show all markers - Bugs / Questions

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Adrian Wu 53 posts 266 karma points

Jul 30, 2018 @ 23:47

1

adjust map to show all markers

Hi Jonathan, thanks for this awesome extensions.

I was spending some time to adjust the map in the back-office to let all the marker icons to show in one map instead of showing the blue "2" clickable cluster. The distance between Queenstown and Dunedin should be enough to show in one map along with the Tauranga.

And sometimes, if I manage to make all the markers showing without the blue clickable cluster number, the New Zealand map is not centered thus need to manually adjust in the front end after rendering to show all the marker cities.

Btw, I can get the map center via terratype.providers['Terratype.GoogleMapsV3'].maps[0]._center in JS. Could you please tell me what method I need to call to set the center as well? I think it will help me to adjust the map to show all the markers and center the map in different devices.

Thanks,

A

Copy Link
Jonathan Richards 288 posts 1742 karma points MVP

Jul 31, 2018 @ 10:38
1
Hi Adrian,

I see a number of questions and so have answered them
1. To switch off clustering (actually set it to minimal values), add the following code snipit to the bottom of your Razor template.
```
<script>
     terratype.onRender(function (provider, map) {
        map._markerclusterer.setMaxZoom(1);
        map._markerclusterer.setGridSize(1);
        map._markerclusterer.redraw();
     })
</script>
```
  For anyone reading this in the future: This code will likely change as I now see a reason to add more control to the Clustering and so will implement something better in a future release.
2. You can control either the starting zoom and centre point or you can ask Terratype to auto fit for you using the Options object of Html.Terratype(). To AutoFit - As in Terratype picks the centre point and zoom
```
  @Html.Terratype(new Options { AutoFit = true, AutoRecenterAfterRefresh = true}, map)
```
  Or set the zoom and starting position manually
```
  @Html.Terratype(new Options { Zoom = 5, Position = new Terratype.CoordinateSystems.Wgs84("-30,130")}, map)
```
3. terratype.providers['Terratype.GoogleMapsV3'].maps[0]._center is an internal js value that is calculated for the AutoFit option above, But if you had some bizarre reason to use it directly, I suppose you could
```
<script>
     terratype.onRender(function (provider, map) {
        map.handle.setCentre(map._centre);
           // NOTE: The map variable that is passed to this function is the same as 
           //       terratype.providers['Terratype.GoogleMapsV3'].maps[0], 
           //       but this is the proper way to access maps - 
           //       eg. use the Terratype js events to access map info 
           //       not via global variables.
      })
 </script>
```
  But this is literally what the AutoFit boolean flag does anyway. Or if you wanted to set it to some arbitrary value then
```
<script>
      terratype.onRender(function (provider, map) {
         map.handle.setCentre(google.maps.LatLng(-30,130));
      })
</script>
```
  NOTE: I am only adding this here to show the art of the possible, and how to use the Terratype js library for GMaps. See the docs for all events. Its better to use the Options of Html.Terratype() as they are guaranteed to be kept working with updates and they work across other map providers too.
Cheers

Jonathan
Copy Link
Adrian Wu 53 posts 266 karma points

Jul 31, 2018 @ 21:22

0

Hi Jonathan, thx for the quick response and your kind support to the community.

terratype.onRender(function (provider, map) { //it is "setCenter" not "setCentre" ? map.handle.setCenter(google.maps.LatLng(-30,130)); }) Anyway, I got this error "Uncaught TypeError: Cannot read property 'getSouthWest' of null" when using the code above.

I guess if I only have one marker then this "new Options { AutoFit = true, AutoRecenterAfterRefresh = true}" will help me to set the marker location as the center. What if I have multiple markers in my NZ map ?

Also it will be great if you can add more control or documentation to the JS going forward like the way we interact with the Google map API which will help us to refer to the Google Map API documentation to interact with the map more in front end. There are some situations I need to reset the map in JS like changing zoom level for different devices.

Cheers,

A

Copy Link
Jonathan Richards 288 posts 1742 karma points MVP

Aug 01, 2018 @ 08:39

100

Hi Adrian,

I got this error "Uncaught TypeError: Cannot read property 'getSouthWest' of null"

The map.handle contains the underlying google.maps.Map class as defined here, your error is contained within that documentation. eg. Your error isn't from Terratype, but is from GMaps.

What if I have multiple markers in my NZ map ?

Wasn't the original map you posted in your first post, A Terratype map showing multiple markers ?

You use MapSetId to combine Multiple Markers on one Map. Its is fully explained in the docs.

Also it will be great if you can add more control or documentation to the JS going forward like the way we interact with the Google map API

This isn't something I have planed on the road map.

Cheers

Jonathan

Copy Link
is working on a reply...

Please Sign in or register to post replies