Dive into Code

Discover code snippets, tutorials, and programming insights

google maps

Google maps populate markers with ajax and marker Cluster

Google maps populate markers with ajax and marker Cluster

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function populateMarkers(url,type,data,datatype, markerCluster,bounds, markers,infowindow){
  /*
  url : the url link for ajax Call
  type: method post or get
  data: a dict {},
  datatype: xml or json,
  markerCluster instance,
  bounds: Googlemaps instance,
  markers: array,
  infowindow: google maps InfoWindow
  */
  $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
        $('#loading').hide();
        markerCluster.minimumClusterSize = data.features.length;
        for (var i = 0; i < data.features.length; i++){
          marker = new google.maps.Marker({
              position: new google.maps.LatLng(data.features[i].geometry.coordinates[1],data.features[i].geometry.coordinates[0]),
              map: map

            });
           latlng = new google.maps.LatLng(data.features[i].geometry.coordinates[1],data.features[i].geometry.coordinates[0])
           bounds.extend(latlng);
           markers.push(marker);
           google.maps.event.addListener(marker, 'click', (function(marker, i) {
             return function() {
               infowindow.setContent("Name:"+data.features[i].properties.name+"</br>"+"Category :"+data.features[i].properties.category);
               infowindow.open(map, marker);
             }
           })(marker, i));
         }
         map.fitBounds(bounds);
         markerCluster.addMarkers(markers);
      }
  });
}
Django

Populate select box with ajax

Populate select box with ajax

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function populateSelectBox($element,url,method,data,datatype,display_field){
  /*
  $element: a jquery element for example $('#myselectbox')
  url : the url link for ajax Call
  method: method post or get
  data: a dict {},
  datatype: xml or json,
  display_field : the field name for display in selectbox <option value="pk"> display_field </option>
  */
    $.ajax({
      url: url,
      method: method,
      data: data,
      datatype: datatype,
      success: function(response){
        var data = JSON.parse(response);
        $element.html('');
        if (data.length != 0) {
          d = '<option value selected="selected">---------</option>';
          for (var i=0 ; i < data.length ; i++ ) {
            d += '<option value="' + parseInt(data[i].pk) + '">' + data[i].fields[display_field] + '</option>';
          }
        } else {
          d = '<option value selected="selected">---------</option>';
        }
        $element.html(d);
      }
    });
}
google maps

Google maps load geojson with ajax

Google maps load geojson with ajax

javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function populateGeometry(url,type,data,datatype, infowindow){
  /*
  url : the url link for ajax Call
  type: method post or get
  data: a dict {},
  datatype: xml or json,
  infowindow: google maps InfoWindow
  */
  $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
          $('#loading').hide();
          for (var i = 0; i < data.features.length; i++){
  	     map.data.addListener('click', function(event) {
  		var myHTML = event.feature.getProperty("name");
  		var mytype = event.feature.getGeometry().getType();
  		infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
                infowindow.setPosition(event.latLng);
		infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
	        infowindow.open(map);
  	     });
    	     map.data.addGeoJson(data.features[i]);
  	 };
         var bounds = new google.maps.LatLngBounds();
         map.data.forEach(function(feature){
             feature.getGeometry().forEachLatLng(function(latlng){
                 bounds.extend(latlng);
              });
          });
          map.fitBounds(bounds);
      }
  });
}
Django

Dynamic TemplateView

Dynamic TemplateView

python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
in urls.py

from .views import PageTemplateView  

and the urlpattern 

    url(r'^(?P<slug>[-\w]+)/$', PageTemplateView.as_view(),
        name='pages'),

in views.py 

from django.views.generic import TemplateView

class PageTemplateView(TemplateView):

    def get_template_names(self):
        templates = []
        template = 'pages/{}.html'.format(self.kwargs['slug'])
        templates.append(template)
        return templates


Then in  project root templates folder  create the folder with name pages. Add a static page for example contact.html  so the full path  is 'pages/contact.html'