Category: javascript

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

Jquery and multiple Ajax

I have had 2 occasions where I need to know when the ajax call have been finished:
  1. When in the beginning of page I have to load specific items that the user have been seen last time
  2. When the page was full with ajax call  – and there was also a “submit” button that should send the information (saved already ) that the user have finished entering the fields .
So – jquery have 2 methods: ajaxStart and ajaxStop.
Code:
Put 2 divs on the page :
<div id=”divWait” style=”display:none”> Please wait…</div>
<div id=”divOK” style=”display:none”> All data submitted</div>
And put this on javascript:
$(“#divWait”).ajaxStart(function() {
$(“#divWait”).show();
$(“#divOK”).hide();
});
 $(“#divWait”).ajaxStop(function() {
$(“#divWait”).hide();
$(“#divOK”).show();
});

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.