1

I have a geojson loaded into CartoDB database. And I have a CSV file too. Names field would be common in both the GeoJSON and CSV file. I had written a logic if the place name in CSV matches the place name in GeoJSON then just add the corresponding geometry from the GeoJSON to the stamen maps. Now my problem is the GeoJSON data matches perfectly after it is loaded into CartoDB. But when the geometry from GeoJSON is added to stamen maps (if the place name of CSV matches to that of GeoJSON ) there seems a slight shift in the data in stamen maps. I think this would be due to the extent had not been set properly.I would like to know how google maps api is setting extent at the backend for displaying data? What would be the exact problem? The snapshot of data inside CartoDB and stamen maps are attached below.

  • Data in CartoDB

    enter image description here

  • Data in stamen maps

    enter image description here

This is the code which am following,

 var data = {
                "type": "FeatureCollection",
                "features": feature
            };
            var layer = "toner-lite";
            var styles = [
                {
                    featureType: 'water',
                    elementType: 'geometry',
                    stylers: [
                        {hue: '#000000'},
                        {saturation: 100},
                        {lightness: -100}
                    ]
                }
            ];
            var mapProp = {
                center: new google.maps.LatLng(38.75597, -77.974228),
                zoom: 4,
                disableDefaultUI: true,
                zoomControl: true,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP
                },
                mapTypeId: layer,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                }
            };
    var styledMap = new google.maps.StyledMapType(styles,
                    {name: "Styled Map"});
            var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);
            var geocoder = new google.maps.Geocoder();
            var bounds = new google.maps.LatLngBounds();
            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');
            //map.mapTypes.set(layer, new google.maps.StamenMapType(layer));

            map.data.addGeoJson(data);

And in the above code the object data has a value "feature" for the key "features". The structure of the value feature would be as below enter image description here

1

Check the projection of your data.

When uploading data to CartoDB with a specific projection, CartoDB transforms the geometries to EPSG 4326 and also to Web Mercator for the geometry to be visualized.

Most basemaps out there represent the world by following the Web Mercator projection, which is the standard in the current web mapping world.

CartoDB basemaps and Stamen ones share this same projection. Actually, inside the CartoDB Editor, you can change the basemap on your map for it to be the Toner Stamen basemap you are using in your second screenshot.

Assuming that the basemaps projection is the same, I would say that your GeoJSON is being reprojected inside CartoDB, so it matches with Web Mercator basemaps, but it doesn't if you are trying to render directly the GeoJSON which might be defined in other projection.

  • Well my projection is in EPSG:3857 - WGS 84 / Pseudo Mercator initially. But i am assuming when my data is loaded inside cartoDB, it should change accordingly. And also am trying to render geojson from cartodb. – User123 Jan 13 '16 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.