I am working on OSM using leaflet..I enable dragging:true on my destination marker as I need it to be draggable ,but while dragging marker my MAP also moves .Is there a way I can only move the marker.
$(document).ready(function()
{
homepg();
});
var cab_map = null;
function homepg()
{
var str = '';
var markers = new L.MarkerClusterGroup();
var lat = '19.068246';
var lng = '72.850638';
cab_map = ddmap.init('mapdivcab',[lat,lng],14);
ddmap.getDirection(13.039680,77.580214,13.040850,77.625532,cab_map,'lmenu');
}
getDirection: function(flat,flon,tlat,tlon,map,mapdv)
{
this.dirMap = map;
this.mapDiv = mapdv;
this.sourceLatLng = new L.LatLng(flat,flon);
this.targetLatLng = new L.LatLng(tlat,tlon);
if(this.fScript)
head.removeChild(fScript);
fScript = document.createElement('script');
fScript.setAttribute("type","text/javascript");
fScript.setAttribute("src", ddmap.serverUrl+"jsonp=ddmap.updateAddressFrom/nearbylocation/"+flat.toFixed(6).replace('.','')+"/"+flon.toFixed(6).replace('.','')+"/1?json_callback=%jsonp");
document.getElementsByTagName("head")[0].appendChild(fScript);
if(this.tScript)
head.removeChild(tScript);
tScript = document.createElement('script');
tScript.setAttribute("type","text/javascript");
tScript.setAttribute("src", ddmap.serverUrl+"jsonp=ddmap.updateAddressTo/nearbylocation/"+tlat.toFixed(6).replace('.','')+"/"+tlon.toFixed(6).replace('.','')+"/1?json_callback=%jsonp");
document.getElementsByTagName("head")[0].appendChild(tScript);
if(this.currentScript)
head.removeChild(currentScript);
currentScript = document.createElement('script');
currentScript.setAttribute("type","text/javascript");
currentScript.setAttribute("src", "viaroute?z=13&output=json&jsonp=ddmap.showRoute&loc="+flat+","+flon+"&loc="+tlat+","+tlon+"&instructions=true");
document.getElementsByTagName("head")[0].appendChild(currentScript);
}
showRoute: function(response) {
var geometry = this._decode(response.route_geometry, 6);
var route = new L.Polyline( [], {dashArray:""} );
route.setLatLngs( geometry );
var sIcon = L.icon({iconUrl:this.imageHost+"/images/marker-source.png",iconAnchor:[10,30],shadowUrl: this.imageHost+'/images/marker-shadow.png'});
var tIcon = L.icon({iconUrl:this.imageHost+"/images/marker-target.png",iconAnchor:[10,30],shadowUrl: this.imageHost+'/images/marker-shadow.png'});
mrkrSrc = L.marker(this.sourceLatLng, {icon: sIcon});
mrkrTgt = L.marker(this.targetLatLng, {icon: tIcon,draggable:'true'});
if(this.mainLayer)
this.dirMap.removeLayer(this.mainLayer);
this.mainLayer = L.layerGroup([mrkrSrc, mrkrTgt])
.addLayer(route)
.addTo(this.dirMap);
var bounds = new L.LatLngBounds(this.sourceLatLng, this.targetLatLng);
this.dirMap.fitBounds(bounds);
this.showRouteDesc(response,geometry);
//
mrkrTgt.on('drag', function(event){
var marker = event.target;
var dst = marker.getLatLng();
var src = mrkrSrc.getLatLng();
ddmap.getroute(src.lat,src.lng,dst.lat,dst.lng,cab_map,'lmenu');//instead of calling getDriection i m calling this function
});
//this function is same as getDirection but i have removed some code, thought that is not required and it was making 'drag event' rough and time taking
getroute: function(flat,flon,tlat,tlon,map,mapdv)
{
this.dirMap = map;
this.mapDiv = mapdv;
this.sourceLatLng = new L.LatLng(flat,flon);
this.targetLatLng = new L.LatLng(tlat,tlon);
if(this.currentScript)
head.removeChild(currentScript);
currentScript = document.createElement('script');
currentScript.setAttribute("type","text/javascript");
currentScript.setAttribute("src", "viaroute?z=13&output=json&jsonp=ddmap.showRoute&loc="+flat+","+flon+"&loc="+tlat+","+tlon+"&instructions=true");
document.getElementsByTagName("head")[0].appendChild(currentScript);
}
Related
I need to add another style to an existing stylesheet. I created this style using the OpenXML Productivity Tools. Unfortunately I can't manage to add this style to the existing stylesheet. The stylesheet is always overwritten. Do I need to adjust the counts (borders, fills, etc)? Or is there a better way?
void AppendStylesToStylesheet(WorkbookStylesPart workbookStylesPart)
{
var styleSheet = workbookStylesPart.Stylesheet;
var fonts1 = new Fonts { Count = 1U, KnownFonts = true };
var font1 = new Font();
font1.Append(new FontSize { Val = 11D });
font1.Append(new Color { Theme = 1U });
font1.Append(new FontName { Val = "Calibri" });
font1.Append(new FontFamilyNumbering { Val = 2 });
font1.Append(new FontScheme { Val = FontSchemeValues.Minor });
fonts1.Append(font1);
var fills1 = new Fills { Count = 3U };
var fill1 = new Fill();
fill1.Append(new PatternFill { PatternType = PatternValues.None });
var fill2 = new Fill();
fill2.Append(new PatternFill { PatternType = PatternValues.Gray125 });
var fill3 = new Fill();
var patternFill3 = new PatternFill { PatternType = PatternValues.Solid };
patternFill3.Append(new ForegroundColor { Theme = 0U, Tint = -4.9989318521683403E-2D });
patternFill3.Append(new BackgroundColor { Indexed = 64U });
fill3.Append(patternFill3);
fills1.Append(fill1);
fills1.Append(fill2);
fills1.Append(fill3);
var borders1 = new Borders { Count = 2U };
var border1 = new Border();
var leftBorder1 = new LeftBorder();
var rightBorder1 = new RightBorder();
var topBorder1 = new TopBorder();
var bottomBorder1 = new BottomBorder();
var diagonalBorder1 = new DiagonalBorder();
border1.Append(leftBorder1);
border1.Append(rightBorder1);
border1.Append(topBorder1);
border1.Append(bottomBorder1);
border1.Append(diagonalBorder1);
var border2 = new Border();
var leftBorder2 = new LeftBorder();
var rightBorder2 = new RightBorder();
var topBorder2 = new TopBorder { Style = BorderStyleValues.Dotted };
topBorder2.Append(new Color { Theme = 0U, Tint = -0.24994659260841701D });
var bottomBorder2 = new BottomBorder { Style = BorderStyleValues.Dotted };
bottomBorder2.Append(new Color { Theme = 0U, Tint = -0.24994659260841701D });
var diagonalBorder2 = new DiagonalBorder();
border2.Append(leftBorder2);
border2.Append(rightBorder2);
border2.Append(topBorder2);
border2.Append(bottomBorder2);
border2.Append(diagonalBorder2);
borders1.Append(border1);
borders1.Append(border2);
var cellStyleFormats1 = new CellStyleFormats { Count = 1U };
cellStyleFormats1.Append(new CellFormat { NumberFormatId = 0U, FontId = 0U, FillId = 0U, BorderId = 0U });
var cellFormats1 = new CellFormats { Count = 3U };
var cellFormat2 = new CellFormat { NumberFormatId = 0U, FontId = 0U, FillId = 0U, BorderId = 0U, FormatId = 0U };
var cellFormat3 = new CellFormat { NumberFormatId = 14U, FontId = 0U, FillId = 2U, BorderId = 1U, FormatId = 0U, ApplyNumberFormat = true, ApplyFill = true, ApplyBorder = true, ApplyAlignment = true };
var alignment1 = new Alignment { Vertical = VerticalAlignmentValues.Center };
cellFormat3.Append(alignment1);
var cellFormat4 = new CellFormat { NumberFormatId = 0U, FontId = 0U, FillId = 0U, BorderId = 0U, FormatId = 0U, ApplyAlignment = true };
var alignment2 = new Alignment { Vertical = VerticalAlignmentValues.Center };
cellFormat4.Append(alignment2);
cellFormats1.Append(cellFormat2);
cellFormats1.Append(cellFormat3);
cellFormats1.Append(cellFormat4);
var cellStyles1 = new CellStyles { Count = 1U };
var cellStyle1 = new CellStyle { Name = "Standard", FormatId = 0U, BuiltinId = 0U };
cellStyles1.Append(cellStyle1);
var differentialFormats1 = new DifferentialFormats { Count = 0U };
var tableStyles1 = new TableStyles { Count = 0U, DefaultTableStyle = "TableStyleMedium2", DefaultPivotStyle = "PivotStyleLight16" };
var colors1 = new Colors();
var mruColors1 = new MruColors();
var color4 = new Color { Rgb = "FFFFFFCC" };
mruColors1.Append(color4);
colors1.Append(mruColors1);
var stylesheetExtensionList1 = new StylesheetExtensionList();
var stylesheetExtension1 = new StylesheetExtension { Uri = "{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" };
stylesheetExtension1.AddNamespaceDeclaration("x14", "http://schemas.microsoft.com/office/spreadsheetml/2009/9/main");
var slicerStyles1 = new X14.SlicerStyles { DefaultSlicerStyle = "SlicerStyleLight1" };
stylesheetExtension1.Append(slicerStyles1);
var stylesheetExtension2 = new StylesheetExtension { Uri = "{9260A510-F301-46a8-8635-F512D64BE5F5}" };
stylesheetExtension2.AddNamespaceDeclaration("x15", "http://schemas.microsoft.com/office/spreadsheetml/2010/11/main");
var timelineStyles1 = new X15.TimelineStyles { DefaultTimelineStyle = "TimeSlicerStyleLight1" };
stylesheetExtension2.Append(timelineStyles1);
stylesheetExtensionList1.Append(stylesheetExtension1);
stylesheetExtensionList1.Append(stylesheetExtension2);
styleSheet.Append(fonts1);
styleSheet.Append(fills1);
styleSheet.Append(borders1);
styleSheet.Append(cellStyleFormats1);
styleSheet.Append(cellFormats1);
styleSheet.Append(cellStyles1);
styleSheet.Append(differentialFormats1);
styleSheet.Append(tableStyles1);
styleSheet.Append(colors1);
styleSheet.Append(stylesheetExtensionList1);
styleSheet.Save();
}
I wish to generate a custom dropdown filter, based on categories from a database.
How is this achieved?
In my example, this is (poorly) implemented with some hard coding and duplication.
var serviceOverlays = [
{name:"Cardiology", value:"cardiology"},
{name:"Opthamology", value:"opthamology"}
];
var oSelect = L.control({position : 'topright'});
oSelect.onAdd = function (map) {
var overlayParent = document.getElementById('new-parent'); // overlays div
var node = L.DomUtil.create('select', 'leaflet-control');
node.innerHTML = '<option value="cardiologist">Cardioligist</option><option value="opthamology">Opthamology</option>';
overlayParent.appendChild(node);
L.DomEvent.disableClickPropagation(node);
L.DomEvent.on(node,'change',function(e){
var select = e.target;
for(var name in serviceOverlays){
serviceOverlays[name].removeFrom(map);
}
serviceOverlays[select.value].addTo(map);
});
Fiddle
I created a Control for you:
L.Control.Select = L.Control.extend({
options: {
position : 'topright'
},
initialize(layers,options) {
L.setOptions(this,options);
this.layers = layers;
},
onAdd(map) {
this.overlayParent = L.DomUtil.create('div', 'leaflet-control select-control');
this.node = L.DomUtil.create('select', 'leaflet-control',this.overlayParent);
L.DomEvent.disableClickPropagation(this.node);
this.updateSelectOptions();
L.DomEvent.on(this.node,'change',(e)=>{
var select = e.target;
for(var value in this.layers){
this.layers[value].layer.removeFrom(map);
}
this.layers[select.value].layer.addTo(map);
});
return this.overlayParent;
},
updateSelectOptions(){
var options = "";
if(this.layers){
for(var value in this.layers){
var layer = this.layers[value];
options += '<option value="'+value+'">'+layer.name+'</option>';
}
}
this.node.innerHTML = options;
},
changeLayerData(layers){
this.layers = layers;
this.updateSelectOptions();
}
});
var oSelect = new L.Control.Select(serviceOverlays,{position : 'topright'}).addTo(map);
The data structure have to be:
var serviceOverlays = {
"cardiology": {name:"Cardiology", layer: cities},
"opthamology": {name:"Opthamology", layer: badCities}
};
Demo: https://jsfiddle.net/falkedesign/1rLntbo5/
You can also change the data dynamicl< with oSelect.changeLayerData(serviceOverlays2)
I make a little app using leaflet to display information about polygons.
Here's how the code works :
A crosshair is displayed in the center of the screen on top of the map
When map pans, crosshair remains in the center on the screen
When crosshair overlaps a polygon, polygon information is displyed in a div
the purpose of this system is to help polygon selecting on mobile for very small polygons
I came up with the following app : https://www.laurentgontier.com/Crosshair/
I need to be able to change polygon style when it is overlaped by crosshair and revert to default style when crosshair leaves polygon.
so far, I wasn't able to achieve this.
Here's the part of code :
//Geojson layer display
var geojsonLayer = new L.GeoJSON.AJAX("map.geojson",{
onEachFeature: onEachFeature
});
geojsonLayer.addTo(map);
//Crosshair display
var crosshairIcon = L.icon({
iconUrl: 'Cible.png',
iconSize: [30, 30], // size of the icon
iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
});
crosshair = new L.marker(map.getCenter(), {icon: crosshairIcon, clickable:false});
crosshair.addTo(map);
// Move the crosshair to the center of the map when the user pans
map.on('move', function(e) {
crosshair.setLatLng(map.getCenter());
});
// Move the crosshair to the center of the map when the user pans
map.on('moveend', function(e) {
var hasHit = false;
var newCenter = map.getCenter();
geoJsonLayers.forEach(function(layer){
var currLayerFeature = layer.feature;
var layerPlace = currLayerFeature.properties.Place;
var layerCoordinates = currLayerFeature.geometry.coordinates[0]
var xp = [], yp =[];
for(var i = 0; i<layerCoordinates.length; i++){
xp.push(layerCoordinates[i][0]); yp.push(layerCoordinates[i][1]);
}
if(checkPointForHit(xp, yp , newCenter.lng, newCenter.lat)){
displayPlace.innerHTML = layerPlace; hasHit = true}
})
if(!hasHit)displayPlace.innerHTML = 'Not overlaping polygon'
});
function checkPointForHit(xp/*array of xpointsOfPolygon*/, yp /*array of ypointsOfPolygon*/, x, y) {
var i, j, c = 0, npol = xp.length;
for (i = 0, j = npol-1; i < npol; j = i++) {
if ((((yp[i] <= y) && (y < yp[j])) ||
((yp[j] <= y) && (y < yp[i]))) &&
(x < (xp[j] - xp[i]) * (y - yp[i]) / (yp[j] - yp[i]) + xp[i])) {
c =!c;
}
}
return c;
}
Any idea about that ?
Use the turfjs library and then use booleanContains:
map.on('moveend', function(e) {
var hasHit = false;
geojsonLayer.resetStyle()
geoJsonLayers.forEach(function(layer){
var layerPlace = layer.feature.properties.Place;
if(turf.booleanContains(layer.toGeoJSON(),crosshair.toGeoJSON())){
displayPlace.innerHTML = layerPlace;
hasHit = true;
layer.setStyle({color: 'red'});
}
})
if(!hasHit){
displayPlace.innerHTML = 'Not overlaping polygon';
}
});
When you change the event from moveend to move the color is updated while moveing
Add DOM Script
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/#turf/turf#5.1.6/turf.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
map.on('move moveend', function(e) {
var hasHit = false;
var newCenter = map.getCenter();
geojsonLayer.resetStyle()
geoJsonLayers.forEach(function(layer){
var layerPlace = layer.feature.properties.Place;
if(turf.booleanContains(layer.toGeoJSON(),crosshair.toGeoJSON())){
displayPlace.innerHTML = layerPlace;
hasHit = true;
layer.setStyle({color: 'red'});
}
})
if(!hasHit){
displayPlace.innerHTML = 'Not overlaping polygon';
}
});
The User types some address (Hyderabad,Telanagna) on text field and clicks on Go button
I am fetching the latitude_res and longitude from google Map API as shown below
$(document).on('click', '.gobtn', function(event) {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '', function(data) {
latitude_res = data.results[0].geometry.location.lat;
longitude_res = data.results[0].geometry.location.lng;
}).done(function() {
});
});
I am able to fetch the latitude and longitude , from google API say for example i got the following values
**17.385044
78.910965**
Then i am making a Ajax call again to fetch all the Markers present at this location in our Database .
And finally initializaing the map as shown below
initializeMap(lator,lonor,markers);
function initializeMap(lator, lonor, markers) {
var map = new L.Map('map_canvas', {
center: new L.LatLng(lator, lonor),
zoom: 5
});
var ggl = new L.Google();
var ggl2 = new L.Google('ROADMAP');
map.addLayer(ggl2);
if (markers.length > 0) {
var markers_leafcontainer = new L.MarkerClusterGroup();
var markersList = [];
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].latitude);
var lng = parseFloat(markers[i].longititude);
var trailhead_name = markers[i].address;
var dealerId = markers[i].dealerID_db;
var dealername = markers[i].dealerName_db;
var contentString = "<html><body><div><p><h2>" + dealername + "</h2></p></div></body></html>";
var marker = L.marker(new L.LatLng(lat, lng), {}).on('click', onClick);
$(".howmanyfound").text(markers.length + ' Found');
markers_leafcontainer.addLayer(marker);
}
map.addLayer(markers_leafcontainer);
map.fitBounds(markers_leafcontainer.getBounds()); //set view on the cluster extent
}
}
Only for the first time this is working , from there on i am getting Uncaught Error: Map container is already initialized.
I am using leaflet with google Maps
So, don't initialize the map inside your function.
var map = new L.Map('map_canvas');
initializeMap(lator,lonor,markers);
function initializeMap(lator, lonor, markers) {
map.setView(L.latLng(lator, lonor));
}
I want to have this script useable for the leaflet libary to use openstreetmap.
I need a dragable marker which stores it coordinates and on dragend sends it to a hidden form which will be sent to my sqlite database!
im not so good in codeing! help much appreciated
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: mapCenter,
title: markerTitle,
icon: markerImage
});
google.maps.event.addListener(marker, 'dragend', function() {
updateLatLong();
});
google.maps.event.addListener(map, 'click', function(event) {
var myLatLng = event.latLng;
var markerPosition = new google.maps.LatLng(myLatLng.lat(), myLatLng.lng());
marker.setPosition(markerPosition);
updateLatLong();
});
updateLatLong();
}
function updateLatLong() {
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
document.getElementById("nexthh_latitude").value = lat;
document.getElementById("nexthh_longitude").value = lng;
}
It should be something like
var map = L.map();//Set your map options
markerImage = L.icon.Default(); //Change this with your icon options.
var marker = L.marker({
draggable:true,
position: map.getCenter(),
title: markerTitle,
icon: markerImage
});
marker.addTo(map);
marker.on('dragend',function() {
updateLatLong();
});
map.on('click',function(event) {
marker.setLatLng(event.latLng);
updateLatLong();
});
function updateLatLong() {
var lat = marker.getLatLng().lat;
var lng = marker.getLatLng().lng;
document.getElementById("nexthh_latitude").value = lat;
document.getElementById("nexthh_longitude").value = lng;
}
Lealfet has an excellent docs here http://leafletjs.com/reference.html
thx for the help!
i wrote it like this:
var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
.setView([48.20682894891699, 16.370315551757812], 12);
var marker = L.marker([48.20682894891699, 16.370315551757812],{
draggable: 'true',
}).addTo(map);
marker.on('dragend', function(event) {
var marker = event.target;
var lat = marker.getLatLng().lat;
var lon = marker.getLatLng().lng;
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lon;
});