Presentation by Kyle Levitan | @kalevitan
$ composer config repositories.drupal composer https://packages.drupal.org/8
$ composer require "phayes/geophp"
*More info about Composer
global:
version: VERSION
css:
base:
libraries/leaflet/leaflet.css: {}
css/THEME_NAME.css: {}
js:
libraries/leaflet/leaflet.js: {}
js/THEME_NAME.js: {}
dependencies:
- core/jquery
libraries:
- leaflet_dcavl/global
{{ page.content }}
#map {
height: 500px;
}
/**
* Declare a layer variable for your basemap.
*/
var baselayer = L.tileLayer ('https://MAP_TILE_URL/{z}/{x}/{y}', {
attribution: '© Mapbox',
maxZoom: 12,
});
/**
* Declare your map variable.
*/
var map = L.map('map', {
scrollWheelZoom: false,
center: [35.5951, -82.5515],
});
/**
* Bind the baselayer to your map.
*/
map.addLayer(baselayer);
Leaflet Provider Demo
/**
* Fetch geoJSON data, then fit contents within viewing area before adding to the map.
*/
$.getJSON('/us-cities').then(function(data) {
var events = L.geoJson(data);
map.fitBounds(events.getBounds(), {
padding: [50, 50]
});
map.addLayer(events);
});
Leaflet allows you to pass a variety of callbacks as
options to the L.geoJson layer.
/*...*/
filter: function(feature, layer) {
return feature.properties.type === 'city';
},
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {icon: [PRE_DEF_VARIABLE]});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(''+feature.properties.name+'
');
},
/*...*/
Leaflet allows you to pass a variety of callbacks as
options to the L.geoJson layer.
$.getJSON('/us-cities').then(function(data) {
var events = L.geoJson(data, {
// Filter feature data.
filter: function(feature, layer) {
return feature.properties.type === 'city';
},
// Define layer settings.
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {icon: [PRE_DEF_VARIABLE]});
},
// Bind popup properties.
onEachFeature: function(feature, layer) {
layer.bindPopup(''+feature.properties.name+'
');
},
});
// Fit points to viewing area.
map.fitBounds(events.getBounds(), {
padding: [50, 50]
});
// Add the events array to the map.
map.addLayer(events);
});
/**
* Declare a layer variable for your basemap.
*/
var baselayer = L.tileLayer ('https://MAP_TILE_URL/{z}/{x}/{y}', {
attribution: '© Mapbox',
maxZoom: 12,
});
/**
* Declare your map variable.
*/
var map = L.map('map', {
scrollWheelZoom: false,
center: [35.5951, -82.5515],
});
/**
* Bind the baselayer to your map.
*/
map.addLayer(baselayer);
$.getJSON('/us-cities').then(function(data) {
var events = L.geoJson(data, {
// Filter feature data.
filter: function(feature, layer) {
return feature.properties.type === 'city';
},
// Define layer settings.
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {icon: [PRE_DEF_VARIABLE]});
},
// Bind popup properties.
onEachFeature: function(feature, layer) {
layer.bindPopup(''+feature.properties.name+'
');
},
});
// Fit points to viewing area.
map.fitBounds(events.getBounds(), {
padding: [50, 50]
});
// Add the events array to the map.
map.addLayer(events);
});
questions?