Skip to content

Commit db31a64

Browse files
MiguelLopez6MiguelLopez6
committed
initial commit with app_plugins folder
1 parent 3c41ff5 commit db31a64

File tree

5 files changed

+335
-0
lines changed

5 files changed

+335
-0
lines changed

‎Source/App_Plugins/LeafletMap/css/leafletmap.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.leaflet-map .map-container {
2+
height: 300px;
3+
width: 100%;
4+
background-color: #ddd;
5+
max-width: 800px;
6+
position: relative;
7+
}
8+
9+
.leaflet-map .map-container .leaflet-map-pane {
10+
z-index: 1;
11+
}
12+
13+
.leaflet-map .map-context-menu {
14+
position: fixed;
15+
display: none;
16+
z-index: 9999;
17+
border: 1px solid #dddddd;
18+
border-radius: 2px;
19+
background-color: #fff;
20+
}
21+
22+
.leaflet-map .map-context-menu > div {
23+
padding: 10px 30px;
24+
cursor: pointer;
25+
}

‎Source/App_Plugins/LeafletMap/js/leafletmap.controller.js

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
(function () {
2+
"use strict";
3+
4+
function leafletmapController($scope, $q, LeafletMapFactory) {
5+
6+
var leafLetAccessToken = $scope.model.config.accessToken;
7+
var mapStarted = false;
8+
var myMap = null;
9+
var mapMarkers = [];
10+
11+
$scope.model.value = $scope.model.value || { latLng: [] };
12+
$scope.mapId = "leaflet-map-" + $scope.$id;
13+
14+
function isMapElementVisible() {
15+
return angular.element("#" + $scope.mapId).is(":visible");
16+
}
17+
18+
function dragMarker(e) {
19+
$scope.model.value.latLng = [e.target._latlng.lat, e.target._latlng.lng];
20+
}
21+
22+
function showMapContextMenu(e) {
23+
$scope.ctxLat = e.latlng.lat;
24+
$scope.ctxLon = e.latlng.lng;
25+
26+
var ctxMenu = angular.element("#" + $scope.mapId).parent().find(".map-context-menu")[0];
27+
ctxMenu.style.display = "block";
28+
ctxMenu.style.left = (event.pageX) + "px";
29+
ctxMenu.style.top = (event.pageY) + "px";
30+
}
31+
32+
function hideMapContextMenu() {
33+
$scope.ctxLat = null;
34+
$scope.ctxLon = null;
35+
36+
var ctxMenu = angular.element("#" + $scope.mapId).parent().find(".map-context-menu")[0];
37+
ctxMenu.style.display = "none";
38+
}
39+
40+
function onZoomEnd(e) {
41+
hideMapContextMenu();
42+
$scope.model.value.zoom = e.target._zoom;
43+
}
44+
45+
function attemptDrawMap() {
46+
if (!mapStarted) {
47+
drawMap().then(function () {
48+
mapStarted = true;
49+
},
50+
function (e) {
51+
console.log(e);
52+
});
53+
} else {
54+
resetMap();
55+
}
56+
}
57+
58+
function drawMap() {
59+
return $q(function (resolve, reject) {
60+
var lat = $scope.model.value.latLng[0];
61+
var lng = $scope.model.value.latLng[1];
62+
var zoom = $scope.model.value.zoom;
63+
var placeMarker = true;
64+
65+
if (isNaN(lat)) {
66+
lat = $scope.model.config.defaultLat || 0;
67+
placeMarker = false;
68+
}
69+
if (isNaN(lng)) {
70+
lng = $scope.model.config.defaultLng || 0;
71+
placeMarker = false;
72+
}
73+
if (isNaN(zoom)) {
74+
zoom = $scope.model.config.defaultZoom || 2;
75+
}
76+
77+
try {
78+
myMap = L.map($scope.mapId).setView([lat, lng], zoom);
79+
myMap.on("contextmenu", showMapContextMenu);
80+
myMap.on("click", hideMapContextMenu);
81+
myMap.on("zoomend", onZoomEnd);
82+
L.tileLayer(
83+
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
84+
{
85+
attribution:
86+
'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
87+
maxZoom: 18,
88+
id: "mapbox/streets-v11",
89+
tileSize: 512,
90+
zoomOffset: -1,
91+
accessToken: leafLetAccessToken
92+
}).addTo(myMap);
93+
94+
if (placeMarker) {
95+
var marker = L.marker([lat, lng], { draggable: true }).addTo(myMap);
96+
marker.on("dragend", dragMarker);
97+
mapMarkers = [marker];
98+
}
99+
100+
return resolve();
101+
} catch (e) {
102+
return reject(e);
103+
}
104+
});
105+
}
106+
107+
function resetMap() {
108+
// clear markers
109+
for (var i = 0; i < mapMarkers.length; i++) {
110+
myMap.removeLayer(mapMarkers[i]);
111+
}
112+
113+
// recenter map and add new marker
114+
var latLng = $scope.model.value.latLng;
115+
116+
if (latLng && !isNaN(latLng[0]) && !isNaN(latLng[1])) {
117+
myMap.setView(latLng, myMap._zoom);
118+
var marker = L.marker(latLng, { draggable: true }).addTo(myMap);
119+
marker.on("dragend", dragMarker);
120+
mapMarkers = [marker];
121+
}
122+
}
123+
124+
function initMaps() {
125+
LeafletMapFactory.initializeMaps()
126+
.then(function () {
127+
$scope.$watch(isMapElementVisible, function (newVal) {
128+
if (newVal === true) {
129+
attemptDrawMap();
130+
}
131+
});
132+
$scope.$watch("model.value.latLng",
133+
function (newVal) {
134+
if (isMapElementVisible()) {
135+
attemptDrawMap();
136+
}
137+
},
138+
true);
139+
},
140+
function() {
141+
console.log("Failed to load map resources.");
142+
});
143+
}
144+
145+
$scope.setContextMarker = function() {
146+
$scope.model.value.latLng = [$scope.ctxLat, $scope.ctxLon];
147+
hideMapContextMenu();
148+
};
149+
150+
initMaps();
151+
}
152+
153+
angular.module("umbraco").controller("LeafletMap.Controller", leafletmapController);
154+
155+
})();

‎Source/App_Plugins/LeafletMap/js/leafletmap.factory.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
angular.module('umbraco.resources').factory('LeafletMapFactory',
2+
3+
function ($q, $timeout) {
4+
5+
var scriptUrl = "https://unpkg.com/leaflet@1.6.0/dist/leaflet.js";
6+
var styleUrl = "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css";
7+
8+
function scriptExists(url) {
9+
return document.querySelectorAll('script[src="' + url + '"]').length > 0;
10+
}
11+
function styleExists(url) {
12+
return document.querySelectorAll('link[rel=stylesheet][src="' + url + '"]').length > 0;
13+
}
14+
15+
function initScripts() {
16+
return $q(function (resolve, reject) {
17+
if (!scriptExists(scriptUrl)) {
18+
var script = document.createElement('script');
19+
script.src = scriptUrl;
20+
document.head.appendChild(script);
21+
script.onload = function() {
22+
$timeout(function() {
23+
return resolve();
24+
});
25+
26+
};
27+
} else {
28+
resolve();
29+
}
30+
});
31+
}
32+
33+
function initStyles() {
34+
return $q(function (resolve, reject) {
35+
if (!styleExists(styleUrl)) {
36+
var style = document.createElement('link');
37+
style.setAttribute("rel", "stylesheet");
38+
style.setAttribute("href", styleUrl);
39+
document.head.appendChild(style);
40+
style.onload = function() {
41+
$timeout(function() {
42+
return resolve();
43+
});
44+
};
45+
} else {
46+
resolve();
47+
}
48+
});
49+
}
50+
51+
function initializeMaps() {
52+
return Promise.all([initScripts(), initStyles()]);
53+
}
54+
55+
return {
56+
initializeMaps: initializeMaps
57+
};
58+
}
59+
);

‎Source/App_Plugins/LeafletMap/package.manifest

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
propertyEditors: [
3+
{
4+
alias: "Vizioz.LeafletMap",
5+
name: "Leaflet Map",
6+
editor: {
7+
view: "~/App_Plugins/LeafletMap/views/leafletmap.html",
8+
valueType: "JSON",
9+
hideLabel: true,
10+
},
11+
prevalues: {
12+
fields: [
13+
{
14+
label: "Leaflet Maps Access Token",
15+
description: "The access token to use Leaflet Maps API",
16+
key: "accessToken",
17+
view: "textstring"
18+
},
19+
{
20+
label: "Default Latitude",
21+
description: "The default latitude to start the map visualization",
22+
key: "defaultLat",
23+
view: "decimal"
24+
},
25+
{
26+
label: "Default Longitude",
27+
description: "The default longitude to start the map visualization",
28+
key: "defaultLng",
29+
view: "decimal"
30+
},
31+
{
32+
label: "Default Zoom",
33+
description: "The default zoom to start the map visualization",
34+
key: "defaultZoom",
35+
view: "number"
36+
}
37+
]
38+
},
39+
icon: "icon-map-location"
40+
}],
41+
javascript: [
42+
"~/App_Plugins/LeafletMap/js/leafletmap.controller.js",
43+
"~/App_Plugins/LeafletMap/js/leafletmap.factory.js"
44+
],
45+
css: [
46+
"~/App_Plugins/LeafletMap/css/leafletmap.css",
47+
]
48+
}

‎Source/App_Plugins/LeafletMap/views/leafletmap.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<div ng-controller="LeafletMap.Controller" class="leaflet-map">
2+
<div class="control-group">
3+
<div class="umb-el-wrap">
4+
<div class="control-header">
5+
<label class="control-label">
6+
Latitude
7+
</label>
8+
</div>
9+
<div class="controls">
10+
<div class="umb-property-editor">
11+
<input name="lat" type="number" class="umb-property-editor umb-number" ng-model="model.value.latLng[0]" fix-number="" min="-90" max="90" step="1e-16">
12+
<span style="display: none;"></span>
13+
</div>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="control-group">
18+
<div class="umb-el-wrap">
19+
<div class="control-header">
20+
<label class="control-label">
21+
Longitude
22+
</label>
23+
</div>
24+
<div class="controls">
25+
<div class="umb-property-editor">
26+
<input name="lon" type="number" class="umb-property-editor umb-number" ng-model="model.value.latLng[1]" fix-number="" min="-180" max="180" step="1e-16">
27+
<span style="display: none;"></span>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="control-group">
33+
<div class="umb-el-wrap">
34+
<div class="control-header"></div>
35+
<div class="controls">
36+
<div class="umb-property-editor">
37+
<div class="map-container">
38+
<div id="{{mapId}}" style="height: 300px; width: 100%;"></div>
39+
<div class="map-context-menu">
40+
<div ng-click="setContextMarker()">Set Location Here</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
<!--ng-show="model.value && model.value[0] !== null && model.value[0] !== undefined && model.value[1] !== null && model.value[1] !== undefined"-->

0 commit comments

Comments
 (0)