change map style at runtime

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

Apptimal 1 post 72 karma points

Nov 06, 2018 @ 10:19
1

Change Map Style at Runtime
Should it be possible to change the Google Maps style (PredefineStyling) at runtime? I've tried using Options but it doesn't seem to work?

Here's my template code:
```
@{
var mapOptions = new Options {
        Provider = new Terratype.Providers.GoogleMapsV3() {
            PredefineStyling = "blush"
        }
    };
}

@Html.Terratype(mapOptions,location)
```
This doesn't throw an error, but it doesn't change the map style either so grateful for any help and to be told I've done it wrong too.

Using Umbraco v7.12.3 with TerraType 1.0.20.
Copy Link
Jonathan Richards 288 posts 1742 karma points MVP

Nov 06, 2018 @ 13:42
0
Hi Apptimal,

As you may have noticed, this isn't something you can do. It may sound like a cool feature, but it would take me lots of code to write and isn't something on my roadmap, sorry.

I can suggest an alternative:-
1. First create yourself 10 new Terratype maps in Developer -> DataTypes. Style them differently, hell you can even mix and match between Bing, Google and Leaflet maps if you wished.
2. Create a new Document Type that contains all 10 new datatypes you created in step 1.
3. Create a new Content Node from the Document Type from step 2. It really doesn't matter where you create this content, as long as it exists. You don't need to set any of the maps or interact with it as a content editor.
4. In your razor code, render out one of the maps from the Content Node, but switch out the Position and Zoom to that which you require.
Below is an example code, it randomly picks one of the 10 maps from a Node with ID of 1145 to use for rendering, but the position and zoom is hardcoded
```
@{

    //  Access the content node that contains the 10 maps
    var styleMapsNode = Umbraco.TypedContent(1145);

    //  Load the 10 maps into an array
    var styleMaps = new List<Terratype.Models.Model> {
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap1"), 
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap2"), 
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap3"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap4"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap5"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap6"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap7"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap8"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap9"),
        styleMapsNode.GetPropertyValue<Terratype.Models.Model>("styleMap10")
    };
}


//  Render one of the 10 maps randomly
@Html.Terratype(new Options {
        Position = new Terratype.CoordinateSystems.Wgs84("41.9028,12.4964"),
        Zoom = 15
    }, styleMaps[new Random().Next(0, styleMaps.Count)]
)
```
(This code is not best practice, it is here to show the art of the possible. I would expect in your own code to not use a hardcoded id of 1145, but instead use a better method to load your Content Node. Also I would expect you to get the Position and Zoom required from another Terratype map that is set by a Content Editor)

Cheers

Jonathan
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?