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 . ( 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 you can obtain data for Romania counties. ( If your country is, for example , USA , you can follow this link : )

Define a javascript variable (varMyCounties) = your json.

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

            L.tileLayer(‘{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw’, {
                maxZoom: 7,
                minZoom: 7,
                attribution: ‘Map data &copy; <a href="">OpenStreetMap</a> contributors, ‘ +
                    ‘<a href="">CC-BY-SA</a>, ‘ +
                    ‘Imagery © <a href="">Mapbox</a>’,
                id: ‘mapbox.light’

            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 =;

//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.lng], { fillColor: "#f00", radius: radCircle })
                        .bindLabel( +’:’+ val, { direction: ‘left’})




You can see an example at

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.
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”).ajaxStop(function() {