custom map style

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

zs123 11 posts 102 karma points

Dec 20, 2018 @ 11:51

1

Custom map style

Bugs / Questions

Umbraco 7

I have a task to apply custom style for map (different colors for countries that have pins etc.)... Is it possible to add JSON code for styling somewhere to apply custom style to map? When I paste the code in Umbraco under Debugger section (as you can see on the picture) and hit Save it looks good but just for one look...after refresh it is back to default. Maybe somewhere in my View trough script? I'm working with ASP.NET MVC.

Copy Link

Jonathan Richards 288 posts 1742 karma points MVP

Dec 20, 2018 @ 13:02

Hi zs123,

I can offer you some code that will style the map when it is rendered on the front end via the command @Html.Terratype()

Place this script block at the bottom of the razor page, or place in a js file that is referenced after the @Html.Terratype() command

<script>
        terratype.onRender(function (provider, map) {

            if (provider.id == 'Terratype.GoogleMapsV3') {
                var styledMapType = new google.maps.StyledMapType(
                    [
                        //  This is just example styling, you are to place the real styling you want here

                        { elementType: 'geometry', stylers: [{ color: '#ebe3cd' }] },
                        { elementType: 'labels.text.fill', stylers: [{ color: '#523735' }] },
                        { elementType: 'labels.text.stroke', stylers: [{ color: '#f5f1e6' }] },
                    ],
                    { name: 'zs123' });


                map.handle.mapTypes.set('zs123', styledMapType);
                map.handle.setMapTypeId('zs123');
            }
        });

</script>

I hope this helps.

Cheers

Jonathan

Copy Link

zs123 11 posts 102 karma points

Dec 20, 2018 @ 14:23

0

Hi Jonathan, Thank you so much for quick answer. It works :)

Copy Link
zs123 11 posts 102 karma points

Dec 21, 2018 @ 14:01

0

Hello Jonathan, just one more short question. Is it possible at all to change styling or to display names just for certain countries? Like for example in this pic:

In my case, I need to apply different color to countries with location markers inside them. Maybe some GeoJSON but I dont know where to put it.

Thank you.

Copy Link

Jonathan Richards 288 posts 1742 karma points MVP

Dec 22, 2018 @ 11:24

Hi zs123,

I did a quick search of StackOverflow and it does look possible with Fusion Tables Layer, eg. Highlight whole countries in Gmaps

Example

<script>
        terratype.onRender(function (provider, map) {

            if (provider.id == 'Terratype.GoogleMapsV3') {

                var highlight = new google.maps.FusionTablesLayer({
                  query: {
                    select: 'geometry',
                    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                    where: "ISO_2DIGIT IN ('US', 'GB', 'DE')",
                    polygonOptions: {
                        fillColor: '#0000FF',
                        fillOpacity: 0.3
                    }
                  },
                  map: map.handle
                });

                highlight.setMap(map.handle);

            }
        });

</script>

(Feel free to combine this example with the previous example in my first post)

Cheers

Jonathan

Copy Link

zs123 11 posts 102 karma points

Dec 24, 2018 @ 10:51

0

Hi Jonathan,

You helped me a lot, I managed to figure it out. :) Thanks again. If you're ever visiting Serbia, send me a message, you have a free beer for this :D

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?