initMap() {
this.map = L.map('map', {
center: [this.coords[0], this.coords[1]],
zoom: 8,
});
let basemap = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62p1p9l3nyx2qp07zm12yh5/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA', {
attribution: 'Imagery © Mapbox, Map Data © OpenStreetMap |'
});
var radarWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer", {
layers: '1',
format: 'image/png',
transparent: true,
opacity: 0.8,
attribution: 'Radar data provided by National Weather Service via nowCOAST'
});
var warningsWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/wwa_meteoceanhydro_shortduration_hazards_warnings_time/MapServer/WMSServer", {
layers: '1',
format: 'image/png',
transparent: true,
opacity: 0.8,
attribution: 'nowCOAST'
});
let overlay = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62phsw73npj2rphndjzt3i2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA');
let layers = L.layerGroup([basemap,radarWMS,warningsWMS,overlay]).addTo(this.map)
this.initialized = true;
}
it('returns a marker with latlng', () => {
const latlng = [-105, 35];
overlay.map = L.map(document.createElement('div'));
const marker = overlay.createMarkerPlaceholder(latlng);
expect(marker.getLatLng()).toEqual(L.latLng(latlng));
});
ngOnInit () {
let options = {
mapId: "map",
lat: "51.505",
lng: "-0.09",
zoom: 12
}
let map = L.map(options.mapId, {
center: new L.LatLng(options.lat, options.lng),
zoom: options.zoom,
zoomControl: false
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var zoomControl = L.control.zoom({
position: 'topright'
});
map.addControl(zoomControl);
this.map = map;
this.addDrawControl();
return map;
}
loadMap() {
this.map = Leaflet
.map("map")
.setView(this.latLng, 13)
.on("click", this.onMapClicked.bind(this))
Leaflet.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
.addTo(this.map);
this.marker = Leaflet
.marker(this.latLng, { draggable: true })
.on("dragend", this.onMarkerPositionChanged.bind(this))
.addTo(this.map);
this.circle = Leaflet.circle(this.latLng, this.radius).addTo(this.map);
}
beforeEach(() => {
latlng = [-105, 35];
name = 'test-name';
layer = {
feature: {
geometry: {
coordinates: [latlng],
type: 'Point'
},
properties: {
name: name
}
}
};
overlay.map = L.map(document.createElement('div'));
});
link: function postLink(scope, element) {
L.Icon.Default.imagePath = config.appSubUrl + "/public/vendor/leaflet/dist/images";
var baselayers = {};
var overlays = {};
var layerControl = L.control.layers(baselayers, overlays, {position: 'topleft'});
var zoomControl = L.control.zoom({position: 'topright'});
var scaleControl = L.control.scale({position: 'bottomleft'});
var esri = L.tileLayer(
'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
);
var initialZoom = 6;
var initialPosition = new L.LatLng(31.5635497, -91.1403352);
var map = L.map(element[0], {
zoomControl: false,
attributionControl: false,
inertia: false,
keyboard: true,
dragging: true,
scrollWheelZoom: true,
zoomAnimation: true,
layers: [esri] // only add one!
}).setView(initialPosition, initialZoom);
scope.$on("zoom", function (event, args) {
console.log("picked up the event");
map.setView(initialPosition, args.zoomlevel,
{
"animate": true
}
);
});
var markerLayer = MapSrv.getMarkerLayer();
markerLayer.success(processMarkerLayer);
var baseLayers = MapSrv.getBaseLayers();
baseLayers.success(processBaseLayers);
var remoteLayers = MapSrv.getRemoteLayers();
remoteLayers.success(processRemoteLayers);
var layers = MapSrv.getLayers();
layers.success(processLayers);
zoomControl.addTo(map);
scaleControl.addTo(map);
layerControl.addTo(map);
function processMarkerLayer(response) {
var markerLayerHandlers = {
onEachFeature: markerLayerOnEachFeatureFunction
};
var layer = L.geoJson(response, markerLayerHandlers);
layer.addTo(map);
}
function processBaseLayers (response) {
for (var i = 0; i < response.length; i++) {
var name = response[i].name;
var url = response[i].url;
var attribution = response[i].attribution;
var subdomains = response[i].subdomains;
var baselayer = L.tileLayer(
url,
{
attribution: attribution,
subdomains: subdomains
}
);
layerControl.addBaseLayer(baselayer, name);
};
}
function processRemoteLayers (response) {
for (var i = 0; i < response.length; i++) {
var name = response[i].name;
var url = response[i].url;
var handler_factory_args = {
style: {
radius: 8,
fillColor: "#" + response[i].color,
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
}
};
var handler_factories = {
style: defaultStyleFactory,
pointToLayer: circleMarkerPointToLayerFactory,
onEachFeature: simplePopupOnEachFeatureFactory
};
process_geojson(url, name, handler_factory_args, handler_factories);
}
}
function processLayers(response) {
for (var i = 0; i < response.length; i++) {
var name = response[i].display_name;
var url = "http://129.114.111.79/media/" + "geojson/" + response[i].file_name;
//var url = "http://localhost:8000/media/" + "geojson/" + response[i].file_name;
var handler_factory_args = {
style: {
fillOpacity: 0.0,
color: "#" + response[i].fill_color,
weight: '3px'
}
};
var handler_factories = {
style: defaultStyleFactory,
pointToLayer: circleMarkerPointToLayerFactory,
onEachFeature: simplePopupOnEachFeatureFactory
};
process_geojson(url, name, handler_factory_args, handler_factories);
}
}
function markerLayerOnEachFeatureFunction (featureData, layer) {
var name = featureData.properties.name;
var popup = L.popup(
{
maxWidth: 800,
minWidth: 500
}
);
var zero = $('<div></div>');
var one = $('<div ng-repeat="row in dashboard.rows"></div>');
var two = $('<div ng-repeat="panel in row.panels | filter:{geolocation:{gis:\'' + name + '\'}}"></div>');
var three = $('<plugin-component type="panel" class="panel-margin"></plugin-component>');
three.appendTo(two.appendTo(one.appendTo(zero)));
var linkFn = $compile(zero[0]);
var content = linkFn(scope);
popup.setContent(content[0]);
layer.bindPopup(popup);
layer.on('popupopen', function (popup) {
$rootScope.$broadcast('render');
});
}
function process_geojson (url, name, args, handlerFactories) {
$http.get(url).success(function successCallback(data) {
var handlers = {
style: handlerFactories.style(args),
pointToLayer: handlerFactories.pointToLayer(args),
onEachFeature: handlerFactories.onEachFeature(args)
};
var geojson = L.geoJson(data, handlers);
geojson.addTo(map);
overlays[name] = geojson;
layerControl.addOverlay(geojson, name);
});
};
function circleMarkerPointToLayerFactory (args) {
var circleMarkerHandler = function (feature, latlng) {
return L.circleMarker(latlng, args.style);
};
return circleMarkerHandler;
};
function markerHandlerFactory (args) {
var markerHandler = function (feature, latlng) {
var options = {
title: feature.properties.name
};
return L.marker(latlng, options);
};
return markerHandler;
};
function defaultStyleFactory (args) {
var defaultStyleHandler = function (feature, layer) {
return args.style;
};
return defaultStyleHandler;
};
function simplePopupOnEachFeatureFactory (args) {
var simplePopup = function (feature, layer) {
console.log('simple popup for a feature');
if (feature.properties) {
var popupString = '<divclass="popup">';
for (var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString);
}
};
return simplePopup;
};
}
import L, { geoJson } from 'leaflet';
import {Util as esriLeafletUtil} from 'esri-leaflet';
import { featureLayer, basemapLayer, get } from 'esri-leaflet';
import * as esriLeaflet from 'esri-leaflet';
import setupEvents from './event-setup';
import createSearcher from './search-setup';
import {getFeatureServiceLayers} from './layer-provider';
L.Icon.Default.imagePath = 'jspm_packages/npm/leaflet@1.0.0-rc.1/dist/images';
var map = L.map('map').setView([38.090294, 77.267569], 12);
const portalSyskey = 41;
var polygons = featureLayer({
url: '//services1.arcgis.com/R293DznM2zjfdFQ4/arcgis/rest/services/client41_public_basemap/FeatureServer/0',
style: function (feature) {
var color = 'blue';
const weight = 2;
if (feature.properties.F_Area_ID) {
if (feature.properties.F_Area_ID.length === 2) {
color = 'green';
} else if (feature.properties.F_Area_ID.length === 3) {
color = 'red';
} else {
color = 'blue';
}
}
else if (feature.properties.Status) {
color = feature.properties.Status === 'Closed Areas' ? 'red' : color;
}
return { color, weight };
import * as L from 'leaflet';
import 'leaflet-routing-machine';
const map: L.Map = L.map('map-container');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
]
}).addTo(map);
import * as L from 'leaflet';
import 'leaflet-areaselect';
const map = L.map('map', {center: L.latLng(-37.7772, 175.2756), zoom: 15 });
let area: L.AreaSelect;
const dim: L.Dimension = { width: 1, height: 2 };
area = L.areaSelect({});
area.remove();
area.addTo(map);
area.getBounds();
area.setDimensions(dim);
L.areaSelect({width: 10, height: 30, keepAspectRatio: true}).addTo(map);
beforeEach(() => {
overlay.map = L.map(document.createElement('div'));
latlng = [-105, 35];
getBoundsSpy = spyOn(overlay, 'getBounds').and.returnValue(latlng);
fitBoundsSpy = spyOn(overlay.map, 'fitBounds');
});
