Leaflet and maps

if you want to display data on maps on the web, then you have a solution for javascript: Leaflet.

First , download the css and js for leaflet from http://leafletjs.com/ . ( and also some plugins, such as lealflet label)  You can include like this:

<link href="~/Scripts/leaflet/leaflet.css" rel="stylesheet"/>
<link href="~/Scripts/leafletlabel/leaflet.label.css" rel="stylesheet"/>

<script src="~/Scripts/leaflet/leaflet.js"></script>

<script src="~/Scripts/leafletlabel/leaflet.label.js"></script>

Then you must obtain the data for the map as GeoJson  – for example, from http://www.geo-spatial.org/file_download/29413 you can obtain data for Romania counties. ( If your country is, for example , USA , you can follow this link : http://lmgtfy.com/?q=usa+geojson )

Define a javascript variable (varMyCounties) = your json.

$( document ).ready(function() {
            map = L.map(‘map’).setView([46,25], 7); //here put your country coordinates

            L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw’, {
                maxZoom: 7,
                minZoom: 7,
                attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ‘ +
                    ‘<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ‘ +
                    ‘Imagery © <a href="http://mapbox.com">Mapbox</a>’,
                id: ‘mapbox.light’
            }).addTo(map);

            L.geoJson(varMyCounties, {
                onEachFeature: onEachFeature
            });

 

//customize the display

function onEachFeature(feature, layer) {
            if (feature.geometry && feature.geometry.type)
                if (feature.geometry.type === ‘Polygon’) {

                    // Get bounds of polygon
                    var bounds = layer.getBounds();
                    // Get center of bounds
                    var center = bounds.getCenter();
                    // Use center to put marker on map

                    var countyName = feature.properties.NAME;

//here put a circle on map, depending on the countyName
  radCircle = (40 – 10) * val + (10 * @max – 40 * @min);
                    radCircle = radCircle / (@max – @min);
                    var circle = L.circleMarker([center.lat, center.lng], { fillColor: "#f00", radius: radCircle })
                        .bindLabel(feature.properties.NAME_UTF8 +’:’+ val, { direction: ‘left’})
                       
                        .addTo(map);

                }
        }

 

 

You can see an example at http://ropwebmvc20160213092204.azurewebsites.net/Home/ShowMap/1AEA07DB-4F14-42DC-989A-91241A020182