I am trying to update two fields from database if map pan based on it longlat position. I am using the following code
map.on("moveend", function () {
var cntLat = map.getCenter().lat;
var cntLong = map.getCenter().lng;
var zoomScale = map.getZoom();
$.ajax({
type: "GET",
url: 'panevent.php?&zoom=' + zoomScale + '&getLat=' + cntLat + '&getLong=' + cntLong,
success: function (result) {
var JSONobject = JSON.parse(result);
var title = JSONobject[0]["title"];
var subtitle = JSONobject[0]["subtitle"];
$("title").html(title);
$("subtitle").html(subtitle);
}});
});
Here is my HTML Block
<div class="currentLoc">
<p id="title"></p>
<p id="subtitle"></p>
</div>
What I am doing wrong?
L.Map does fire dragend. You have to use moveend
dragend is for draggable L.Marker
Related
I would like the ability to click on my map and have the following happen:
Add a temporary marker to the map that will display the lat lng coordinates of that marker.
This should help
<script src="https://cdn.jsdelivr.net/npm/leaflet#1.3.4/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers#1.0.6/src/assets/js/leaflet.extra-markers.min.js"></script>
<body>
...
<div id="carteDiv"> </div>
</body>
<script>
// Map object
var m_Carte = L.map('carteDiv').setView([45.469717, -73.563719], m_Zoom);
// Create click event handler
m_Carte.on('click', onMapClick);
// The function to create marker on click
var onMapClick = function (e) {
var marqueur = L.marker([e.latlng.lat, e.latlng.lng], {
icon : L.ExtraMarkers.icon({
icon : 'fa-number',
prefix : 'fa',
markerColor : red,
number : 0
})
}).addTo(m_Carte).bindPopup(e.latlng.lat + ' ' + e.latlng.lng);
};
</script>
As i just begin to understand how API v3 work, i have a problem to set different content for my info windows. I'm not a programmer also!! I'd like to put several markers (no problem) with different contents. The problem is i have only one info window working, not the second one. How to attribute a content to a specific marker. Can't find the way in the google maps documentation.
Here the code:
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.648288,8.173828),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<iframe src="http://www.360- ----- vision.fr/panos/communes_ot_patrimoine/Sanary/" height="300px" width="500px"></iframe>'+
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Eglise Sanary</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var image = 'images/marqueur-360.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.115145,5.789623),
map: map,
icon: image,
title:"Eglise de Sanary"
});
var contentString1 = '<iframe src="http://www.360- vision.fr/panos/communes_ot_patrimoine/castelsardo/" height="300px" width="500px"> </iframe>'+
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Castelsardo</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var image = 'images/marqueur-360.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.042074,8.739624),
map: map,
icon: image,
title:"Castelsardo"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here the link to see my map.
map example
Thanks a lot for any suggestion.
Steph. :-)
Each infowindow can be linked to specific marker, name marker and infowindow accordingly .
Eg:
var marker= ....
var infowindow=...
infowindow.open(map,marker);
var marker2= ....
var infowindow2=...
infowindow2.open(map,marker2);
I am trying to implement SAPUI5 splitter button/control that accepts one Label and one button like Linked in. Like linked in when you add your skills, text display along with delete button. If you want to delete the text then simple click on delete button, it will delete (this is what happens in linked in).
I am also want to implement same thing using SAP splitter control but i am facing some layout issue. I have tried a lot to fix this issue but no luck.
Here is my code
In code there three splitters in total. Main splitter called oSplitterH that saves 0.....n sub-sublitters in its addFirstPaneContent.
The problem is it always display split button in vertical alignment rather than horizontal like linked in. I also changed the layout into Horizontal but still displaying in vertical alignment.
Any suggestion?
var splitterLabel = new Label({
text : 'Splitter ',
width: '80px'
});
var oSplitterH = new sap.ui.commons.Splitter("splitterH");
oSplitterH.setSplitterOrientation(sap.ui.commons.Orientation.Horizontal);
oSplitterH.setSplitterPosition("200%%");
oSplitterH.setMinSizeFirstPane("20%");
oSplitterH.setMinSizeSecondPane("30%");
oSplitterH.setWidth("200%");
//adding Labels to both panes
var oSplitter2 = new sap.ui.commons.Splitter("splitterH12");
oSplitter2.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
oSplitter2.setSplitterPosition("10%");
oSplitter2.setMinSizeFirstPane("10%");
oSplitter2.setMinSizeSecondPane("10%");
oSplitter2.setWidth("20%");
var oLabel2 = new sap.ui.commons.Label({text: "Part1"});
oSplitter2.addFirstPaneContent(oLabel2);
var oLabel2 = new sap.ui.commons.Label({text: "Part2"});
oSplitter2.addFirstPaneContent(oLabel2);
var oSplitter3 = new sap.ui.commons.Splitter("splitterH13");
oSplitter3.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
oSplitter3.setSplitterPosition("10%");
oSplitter3.setMinSizeFirstPane("10%");
oSplitter3.setMinSizeSecondPane("10%");
oSplitter3.setWidth("20%");
var oLabe123 = new sap.ui.commons.Label({text: "Part3"});
oSplitter3.addFirstPaneContent(oLabe123);
var oLabe1234 = new sap.ui.commons.Label({text: "Part4"});
oSplitter3.addFirstPaneContent(oLabe1234);
oSplitterH.addFirstPaneContent(oSplitter2);
oSplitterH.addFirstPaneContent(oSplitter3);
createProfileMatrix.createRow(splitterLabel, oSplitterH, null, null);
The following code may help you.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="main.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("sapui5samples");
var view = sap.ui.view({id:"idlinkedIn-label1", viewName:"sapui5samples.linkedIn-label", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="list"></div>
</body>
</html>
main.css
.tech-area{
border:1px solid gray;
border-radius: 5px;
width:500px;
height:300px;
left:0;
top:50;
position:relative;
overflow:scroll;
}
SAPUI5 view file (didn't used controller file)
var oLayout;
sap.ui.jsview("sapui5samples.linkedIn-label", {
getControllerName : function() {
return "sapui5samples.linkedIn-label";
},
createContent : function(oController) {
// create a simple SearchField with suggestion list (list expander
// visible)
var oSearch = new sap.ui.commons.SearchField("suggestSearch1", {
enableListSuggest : true,
startSuggestion : 1,
search : function(oEvent) {
var techName = oEvent.getParameter("query");
addTechnology(techName);
},
suggest : doSuggest
});
// Button for adding the technology if it is not listed in the available
// technologies
var oButton = new sap.ui.commons.Button({
text : "Add",
tooltip : "Add Technology",
press : function() {
var tech = sap.ui.getCore().byId("suggestSearch1").getValue();
addTechnology(tech);
}
});
// create a simple horizontal layout
var oLayout = new sap.ui.commons.layout.HorizontalLayout({
content : [ oSearch, oButton ]
});
// attach it to some element in the page
oLayout.placeAt("content");
oLayout = new sap.ui.commons.layout.HorizontalLayout("target");
oLayout.addStyleClass("tech-area");
// attach it to some element in the page
oLayout.placeAt("list");
}
});
// Help function to handle the suggest events of the search field
var doSuggest = function(oEvent) {
var sVal = oEvent.getParameter("value");
var aSuggestions = filterTechnologies(sVal); // Find the technologies
var oSearchControl = sap.ui.getCore().byId(oEvent.getParameter("id"));
oSearchControl.suggest(sVal, aSuggestions); // Set the found suggestions on
// the search control
};
var technologies = [ "Java", ".Net", "PHP", "SAPUI5", "JQuery", "HTML5", "" ];
technologies.sort();
jQuery.sap.require("jquery.sap.strings"); // Load the plugin to use
// 'jQuery.sap.startsWithIgnoreCase'
// Help function to filter the technologies according to the given prefix
var filterTechnologies = function(sPrefix) {
var aResult = [];
for (var i = 0; i < technologies.length; i++) {
if (!sPrefix || sPrefix.length == 0
|| jQuery.sap.startsWithIgnoreCase(technologies[i], sPrefix)) {
aResult.push(technologies[i]);
}
}
return aResult;
};
var count = 0;
var arr = [];
// function for add the item to horizontal layout
var addTechnology = function(techName) {
var elementIndex = arr.indexOf(techName);
// conditional statement for adding the tech to the list
if (elementIndex === -1) {
count++;
// create a horizontal Splitter
var oSplitterV = new sap.ui.commons.Splitter({
width : "120px",
height : "30px",
showScrollBars : false,
splitterBarVisible : false
});
oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
oSplitterV.setSplitterPosition("60%");
oSplitterV.setMinSizeFirstPane("60%");
oSplitterV.setMinSizeSecondPane("40%");
// label with dynamic Id
var oLabel1 = new sap.ui.commons.Label("tCount" + count, {
text : techName,
tooltip : techName
});
oSplitterV.addFirstPaneContent(oLabel1);
var oLabel2 = new sap.ui.commons.Button({
icon : "img/delete.png",
press : function() {
removeElement(techName);
oSplitterV.destroy();
}
});
oSplitterV.addSecondPaneContent(oLabel2);
sap.ui.getCore().byId("target").addContent(oSplitterV);
// Adding the tech to the parent array
arr.push(techName);
// Emptying the search box
sap.ui.getCore().byId("suggestSearch1").setValue("");
} else {
sap.ui.commons.MessageBox.alert(techName
+ " is already added to the list");
}
}
// function for removing removed element from parent array
var removeElement = function(addedTech) {
// Find and remove item from an array
var i = arr.indexOf(addedTech);
if (i != -1) {
arr.splice(i, 1);
}
}
Please make a note that I concentrated more on functionality rather than look and feel
Thanks,
prodeveloper
I can't seem to get the my map markers to display when I use an image sprite on the iphone. They appear when I use the standard google map markers on iphone and when viewing the site in the desktop the sprite icons work fine.
Here is the code I use to create the markers, I am using Zepto but JQuery could as easily apply.
$.ajax({
dataType: 'jsonp',
url: myLocations.LocatorUrl,
timeout: 8000,
success: function(data) {
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
$.each(data, function(index, item){
var data = item, pincolor,
latLng = new google.maps.LatLng(data.lat, data.lng);
var d = 'http://blah';
var pinImage = new google.maps.MarkerImage(d+"/assets/img/sprite.locator.png",
new google.maps.Size(24, 36),
new google.maps.Point(0,25),
new google.maps.Point(10, 34));
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.type,
icon: pinImage
});
bounds.extend(latLng); // Extend the Latlng bound method
var bubbleHtml = '<div class="bubble"><h2>'+item.type+'</h2><p>'+item.address+'</p></div>'; // Custom HTML for the bubble
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(bubbleHtml);
infoWindow.open(map, marker);
});
markers.push(marker); // Push markers into an array so they can be removed
})(marker, data);
});
map.fitBounds(bounds); // Center based on values added to bounds
}, error: function(x, t, m) {
console.log('errors')
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
});
Got it. Turns out the images I was referencing were on localhost, when I swapped this to the actual IP address of my local machine it worked.
I using jQuery to listen to the touchstart,touchmove and touchend, and I able to drag the 'dragitem' in iphone Safari(position change that base on the touchmove). But now the issue is how i can make the dropArea response when the 'dragitem' drag to the 'dropArea'.
For example the 'dropArea' will highlight/glow, change background color, and etc when the 'dragitem' is drag within the 'dropArea', but when it is away the 'dropArea' will remain normal. Any idea?
Thank in advance.
HTML:
<div class='dragArea' >
<div id='box1' class='dragitem'>
</div>
<div id='box2' class='dragitem'>
</div>
</div>
<div class='dropArea'></div>
jQuery:
var startTouchX = null;
var startTouchY = null;
var moveTouchX = null;
var moveTouchY = null;
var startPositionX = null;
var startPositionY = null;
$('.dragitem').bind('touchstart',function(event){
event.preventDefault();
var e = event.originalEvent;
startTouchX = e.targetTouches[0].pageX;
startTouchY = e.targetTouches[0].pageY;
startPositionX = $(this).css('left');
startPositionY = $(this).css('top');
});
$('.dragitem').bind('touchmove', function(event){
event.preventDefault();
var e = event.originalEvent;
moveTouchX = e.targetTouches[0].pageX;
moveTouchY = e.targetTouches[0].pageY;
$('#movex').text(moveTouchX);
$('#movey').text(moveTouchY);
$(this).css({top: (moveTouchY - 50), left: (moveTouchX - 5)});
});
$('.dragitem').bind('touchend', function(event){
$(this).animate({top: startPositionY, left: startPositionX}, 'fast');
});
i would check the offset() of the $('.dragitem') array and $('.dropArea.') in the move Handler ... or an interval.