Depot init
This commit is contained in:
34
media/css/openstreetmap.css
Normal file
34
media/css/openstreetmap.css
Normal file
@@ -0,0 +1,34 @@
|
||||
.map {
|
||||
height:400px;
|
||||
width:100%;
|
||||
}
|
||||
/* from http://cssdeck.com/labs/bv45bh6p */
|
||||
div.map-callout {
|
||||
min-height:50px;
|
||||
width:200px;
|
||||
float:left;
|
||||
left:-20px;
|
||||
top:10px;
|
||||
background-color:#444;
|
||||
position:relative;
|
||||
color:#ccc;
|
||||
padding:10px;
|
||||
border-radius:3px;
|
||||
box-shadow:0px 0px 20px #999;
|
||||
margin:0px;
|
||||
border:1px solid #333;
|
||||
border-radius:5px;
|
||||
text-shadow:0 0 1px #000;
|
||||
}
|
||||
.map-callout::before {
|
||||
content:"";
|
||||
width:0px;
|
||||
height:0px;
|
||||
border:0.8em solid transparent;
|
||||
position:absolute;
|
||||
}
|
||||
.map-callout.map-callout-bottom::before {
|
||||
left:5%;
|
||||
top:-20px;
|
||||
border-bottom:10px solid #444;
|
||||
}
|
||||
41
media/joomla.asset.json
Normal file
41
media/joomla.asset.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
|
||||
"name": "com_depot",
|
||||
"version": "1.0.0",
|
||||
"description": "Joomla CMS",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"assets": [
|
||||
{
|
||||
"name": "com_depot.openstreetmap",
|
||||
"type": "preset",
|
||||
"dependencies": [
|
||||
"com_depot.openstreetmap#style",
|
||||
"com_depot.openstreetmap#script"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "com_depot.openstreetmap",
|
||||
"type": "script",
|
||||
"uri": "com_depot/openstreetmap.js",
|
||||
"dependencies": [
|
||||
"com_depot.openlayers"
|
||||
],
|
||||
"attributes": {
|
||||
"defer": true
|
||||
},
|
||||
"version": "1.0.0"
|
||||
},
|
||||
{
|
||||
"name": "com_depot.openstreetmap",
|
||||
"type": "style",
|
||||
"uri": "com_depot/openstreetmap.css",
|
||||
"dependencies": [
|
||||
"com_depot.openlayers"
|
||||
],
|
||||
"attributes": {
|
||||
"defer": true
|
||||
},
|
||||
"version": "1.0.0"
|
||||
}
|
||||
]
|
||||
}
|
||||
137
media/js/openstreetmap.js
Normal file
137
media/js/openstreetmap.js
Normal file
@@ -0,0 +1,137 @@
|
||||
var map;
|
||||
var ajaxurl;
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
// get the data passed from Joomla PHP
|
||||
// params is a Javascript object with properties for the map display:
|
||||
// centre latitude, centre longitude and zoom, and the helloworld greeting
|
||||
const params = Joomla.getOptions('params');
|
||||
ajaxurl = params.ajaxurl;
|
||||
|
||||
// We'll use OpenLayers to draw the map (http://openlayers.org/)
|
||||
|
||||
// Openlayers uses an x,y coordinate system for positions
|
||||
// We need to convert our lat/long into an x,y pair which is relative
|
||||
// to the map projection we're using, viz Spherical Mercator WGS 84
|
||||
const x = parseFloat(params.longitude);
|
||||
const y = parseFloat(params.latitude);
|
||||
const mapCentre = ol.proj.fromLonLat([x, y]); // Spherical Mercator is assumed by default
|
||||
|
||||
// To draw a map, Openlayers needs:
|
||||
// 1. a target HTML element into which the map is put
|
||||
// 2. a map layer, which can be eg a Vector layer with details of polygons for
|
||||
// country boundaries, lines for roads, etc, or a Tile layer, with individual
|
||||
// .png files for each map tile (256 by 256 pixel square).
|
||||
// 3. a view, specifying the 2D projection of the map (default Spherical Mercator),
|
||||
// map centre coordinates and zoom level
|
||||
map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({ // we'll get the tiles from the OSM server
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
view: new ol.View({ // default is Spherical Mercator projection
|
||||
center: mapCentre,
|
||||
zoom: params.zoom
|
||||
})
|
||||
});
|
||||
|
||||
// Now we add a marker for our Helloworld position
|
||||
// To do that, we specify it as a Point Feature, and we add styling
|
||||
// to define how that Feature is presented on the map
|
||||
var helloworldPoint = new ol.Feature({geometry: new ol.geom.Point(mapCentre)});
|
||||
// we'll define the style as a red 5 point star with blue edging
|
||||
const redFill = new ol.style.Fill({
|
||||
color: 'red'
|
||||
});
|
||||
const blueStroke = new ol.style.Stroke({
|
||||
color: 'blue',
|
||||
width: 3
|
||||
});
|
||||
const star = new ol.style.RegularShape({
|
||||
fill: redFill,
|
||||
stroke: blueStroke,
|
||||
points: 5,
|
||||
radius1: 20, // outer radius of star
|
||||
radius2: 10, // inner radius of star
|
||||
})
|
||||
helloworldPoint.setStyle(new ol.style.Style({
|
||||
image: star
|
||||
}));
|
||||
// now we add the feature to the map via a Vector source and Vector layer
|
||||
const vectorSource = new ol.source.Vector({});
|
||||
vectorSource.addFeature(helloworldPoint);
|
||||
const vector = new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
});
|
||||
map.addLayer(vector);
|
||||
|
||||
// If a user clicks on the star, then we'll show the helloworld greeting
|
||||
// The greeting will go into another HTML element, with id="greeting-container"
|
||||
// and this will be shown as an Overlay on the map
|
||||
var overlay = new ol.Overlay({
|
||||
element: document.getElementById('greeting-container'),
|
||||
});
|
||||
map.addOverlay(overlay);
|
||||
|
||||
// Finally we add the onclick listener to display the greeting when the star is clicked
|
||||
// The way this works is that the onclick listener is attached to the map,
|
||||
// and then it works out which Feature or Features have been hit
|
||||
map.on('click', function(e) {
|
||||
let markup = '';
|
||||
let position;
|
||||
map.forEachFeatureAtPixel(e.pixel, function(feature) { // for each Feature hit
|
||||
markup = params.greeting;
|
||||
position = feature.getGeometry().getCoordinates();
|
||||
}, {hitTolerance: 5}); // tolerance of 5 pixels
|
||||
if (markup) {
|
||||
document.getElementById('greeting-container').innerHTML = markup;
|
||||
overlay.setPosition(position);
|
||||
} else {
|
||||
overlay.setPosition(); // this hides it, if we click elsewhere
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function getMapBounds(){
|
||||
var mercatorMapbounds = map.getView().calculateExtent(map.getSize());
|
||||
var latlngMapbounds = ol.proj.transformExtent(mercatorMapbounds,'EPSG:3857','EPSG:4326');
|
||||
return { minlat: latlngMapbounds[1],
|
||||
maxlat: latlngMapbounds[3],
|
||||
minlng: latlngMapbounds[0],
|
||||
maxlng: latlngMapbounds[2] }
|
||||
}
|
||||
|
||||
function searchHere() {
|
||||
var mapBounds = getMapBounds();
|
||||
var token = jQuery("#token").attr("name");
|
||||
jQuery.ajax({
|
||||
url: ajaxurl,
|
||||
data: { [token]: "1", task: "mapsearch", view: "helloworld", format: "json", mapBounds: mapBounds },
|
||||
success: function(result, status, xhr) { displaySearchResults(result); },
|
||||
error: function() { console.log('ajax call failed'); },
|
||||
});
|
||||
}
|
||||
|
||||
function displaySearchResults(result) {
|
||||
if (result.success) {
|
||||
var html = "";
|
||||
for (var i=0; i<result.data.length; i++) {
|
||||
html += '<p><a href="' + result.data[i].url + '">' +
|
||||
result.data[i].greeting + '</a>' +
|
||||
" @ " + result.data[i].latitude +
|
||||
", " + result.data[i].longitude + "</p>";
|
||||
}
|
||||
jQuery("#searchresults").html(html);
|
||||
} else {
|
||||
var msg = result.message;
|
||||
if ((result.messages) && (result.messages.error)) {
|
||||
for (var j=0; j<result.messages.error.length; j++) {
|
||||
msg += "<br/>" + result.messages.error[j];
|
||||
}
|
||||
}
|
||||
jQuery("#searchresults").html(msg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user