Ad

OpenMapLayers Not Rendering Map In A MVC Project

I'm trying to start to work on a project based on OpenMapLayers, what i did was going on ther site and copy paste the basic example in a html file and running it, everything works as expected, than I basically tried to do the same on a new MVC project but nothing gets rendered. Any idea on why that happens?

@{
    ViewBag.Title = "Home Page";
}
<h2>Getting started</h2>
<div id="mapdiv"></div>
@section scripts{
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
            map = new OpenLayers.Map("mapdiv");
            map.addLayer(new OpenLayers.Layer.OSM());

            var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286)
                .transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    map.getProjectionObject() // to Spherical Mercator Projection
                );

            var zoom = 16;

            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);

            markers.addMarker(new OpenLayers.Marker(lonLat));

            map.setCenter(lonLat, zoom);

    </script>
}
Ad

Answer

Here I made a example for you, let me know if this is what you are looking for.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.3.1/build/ol.js"></script>
    <title>GeoJSON to Points</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      const geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': ol.proj.fromLonLat([37.41, 8.82])
            }
          },
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': ol.proj.fromLonLat([38.41, 9.82])
            }
          },
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': ol.proj.fromLonLat([37.41, 9.82])
            }
          }
        ]
      };

      const style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: null,
          stroke: new ol.style.Stroke({color: 'red', width: 2})
        })
      });

      const vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
      });

      const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style
      });

      const map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayer
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 8
        })
      });
    </script>
  </body>
</html>

UPDATE

If your JSON format is the one you describe in the comments of the question, this should work,

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.3.1/build/ol.js"></script>
    <title>JSON to Points</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      const jsonObject = {
        "coords": [
          { "latitude": "8.417334", "longitude": "45.322557" },
          { "latitude": "8.411594", "longitude": "45.324352"}
        ]
      };

      const features = [];

      for(const coord of jsonObject.coords) {
        features.push(new ol.Feature({
          geometry: new ol.geom.Point(
            ol.proj.fromLonLat([coord.longitude, coord.latitude]),
            'XY'
          )
        }));
      }

      const style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: null,
          stroke: new ol.style.Stroke({color: 'red', width: 2})
        })
      });

      const vectorSource = new ol.source.Vector({
        features
      });

      const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style
      });

      const map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayer
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([45.32, 8.41]),
          zoom: 14
        })
      });
    </script>
  </body>
</html>

Ad
source: stackoverflow.com
Ad