Sign in Register
Go to solution
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
    zs123
    1

    Custom map style

    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.

    enter image description here

    Copy Link
  • Jonathan Richards 288 posts 1742 karma points MVP
    Dec 20, 2018 @ 13:02
    Jonathan Richards
    100

    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
    zs123
    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
    zs123
    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:

    enter image description here

    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
    Jonathan Richards
    0

    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
    zs123
    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
Please Sign in or register to post replies

Write your reply to:

Draft