0

I have created a geographical view of a point using Leaflet based on a coordinate system data. Since I'm using the coordinate system rather than lat and long, I'm using proj4leaflet for the conversion of data.

When I hard code the co ordinates within the JavaScript as a variable as shown in the below code. It is working as expected.

var map = L.map('map').setView([44.97,-93.24], 11);

// MapQuest OSM Tiles

// Attribution (https://gist.github.com/mourner/1804938)
var osmAttr = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    mqTilesAttr = 'Tiles &copy; <a href="https://www.mapquest.com/"" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png" />';

L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
      attribution: 'Data by <a href="https://openstreetmap.org">OpenStreetMap contributors</a>'
  }
)
.addTo(map);

// GeoJSON layer (UTM15)
proj4.defs('EPSG:26915', '+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs');

var geojson = {
  'type': 'Feature',
  'geometry': {
    'type': 'Point',
    'coordinates': [481650, 4980105],
  },
  'properties': {
    'name': 'University of Minnesota'
  },
  'crs': {
    'type': 'name',
    'properties': {
        'name': 'urn:ogc:def:crs:EPSG::26915'
      }
    }
  };

L.Proj.geoJson(geojson, {
  'pointToLayer': function(feature, latlng) {
    return L.marker(latlng).bindPopup(feature.properties.name);
  }
}).addTo(map);

But when I try to pass them by an API it is not even hitting my API.

I have tried using the following code

    .then(response => response.json())
    .then(data => {
        L.Proj.geoJson(data, {
            'pointToLayer': function(feature, latlng) {
                return L.marker(latlng).bindPopup(feature.properties.name);
            }
        }).addTo(map);
    })

it throws up an error that Access to fetch at 'https://localhost:44360/api/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can someone suggest how to pass a GeoJSON to this Leaflet map by using an API?

3
  • 3
    What API, exactly? Jan 5 at 8:10
  • GeoJSON will be in EPSG:4326
    – Ian Turton
    Jan 5 at 14:25
  • 1
    You have cross domain security error (CORS), since your server does not include required CORS header. There's sea of articles on the internet about this problem and solutions, here is one of them: freecodecamp.org/news/…
    – TomazicM
    Jan 7 at 20:57
0

You have to load first the data and then you can use the geojson, you can't directly pass an url to L.Proj.geoJson(). A Request would look like:

fetch("YOUR_API_URL")
    .then(response => response.json())
    .then(data => {
        L.Proj.geoJson(data, {
            'pointToLayer': function(feature, latlng) {
                return L.marker(latlng).bindPopup(feature.properties.name);
            }
        }).addTo(map);
    })
1
  • i have tried this but it throws up the following error "Access to fetch at 'localhost:44360/api' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." Jan 7 at 5:40

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.