We Keep Coding

Two scripts refuse to run together

I've encountered a strange issue while trying to run scripts within my .cshtml file. I am trying to run a script that sets an icon depending on how the user clicks on it, and other which uses the Leaflet Javascript library to display a map.
My issue is that only the last script to be listed in the section works (aka if I put star.js after mapdisplay.js, star.js would work and mapdisplay.js would not, and vice-versa).
I am running this on .NET 5.0
Index.cshtml - #section scripts
#section scripts {
<script type="text/javascript" src="~/scripts/star.js"></script>
<script>
var lat = '#Model.Latitude';
var long = '#Model.Longitude';
</script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
</script>
<script type="text/javascript" src="~/scripts/mapdisplay.js"></script>
}
And just in case, here's both scripts.
star.js
window.onload = function () {
//Adds click event handler to make an AJAX request to star when the star is clicked
$(".clickable").click(function () {
let star = $(this);
//Might be undefined if user deletes the attribute
if (star.attr("reportId") != undefined) {
let id = parseInt(star.attr("reportId"));
//NaN might happen if user changes reportId attribute to something which isn't a number
if (!isNaN(id)) {
let dataToSend = {
reportId: id
}
//Sends ajax request
$.ajax({
type: 'POST',
url: '/Home/Star',
data: dataToSend,
dataType: "json",
success: function (response) {
if (response) {
//If StarReport finished successfully, update the UI
if (star.hasClass("starred")) {
star.removeClass("starred").addClass("unstarred");
} else {
star.removeClass("unstarred").addClass("starred");
}
}
}
});
} else {
alert("Don't mess with the code!");
}
} else {
alert("Don't mess with the code!");
}
});
}
mapdisplay.js
window.onload = function () {
//Creates map bounds
let topLeftCorner = L.latLng(35.11111111115, 14.111111111);
let bottomRightCorner = L.latLng(35.1123231312, 14.67243783646247);
let bounds = L.latLngBounds(topLeftCorner, bottomRightCorner);
let map = L.map("map", {
center: L.latLng(lat, long),
zoom: 14,
zoomControl: false,
dragging: false,
keyboard: false,
maxBoundsViscosity: 1.0
});
map.setMinZoom(18);
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
).addTo(map);
marker = L.marker([lat, long], { draggable: false }).addTo(map);
}
Any help would be appreciated, as this is driving me nuts.

For closure's sake I'll respond to my own question. As user:charlietfl pointed out in comments, window.onload can only be assigned to one function.
I personally simply solved this by using window.addEventListener('load', function () { in the .js files instead of window.onload, which works in my context.

How to load google maps as callback?

I have defined an ajax function that get some records from the database, after the data was taken I want load google maps, so I passed the function as callback:
get_records = function (callback) {
var postUrl = "someurl";
var postData =
{
csrfToken: "token",
};
$.post(postUrl, postData, function (response) {
callback(response);
});
};
this is the callback:
get_records(function(result){
init_map();
});
where init_map is:
init_map = function () {
var map;
google.maps.event.addDomListener(window, "load", function () {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
});
}
return marker;
}
var marker0 = createMarker({
position: new google.maps.LatLng(40.9117877, 14.7679659),
map: map,
icon: "../assets/img/marker-green.png"
}, "<h1 class='black-content'>Marker 0</h1><p>This is the home marker.</p>");
});
return map;
};
if I place the init_map function outside get_records the map is displayed, but with the code above I get no map displayed, why?

If there's no response coming from the ajax post, the callback will never be called.
A better approach is to use the Promise interface:
var jqxhr = $.post("example.php", function() {
console.log("success")
}).done(function() {
// call init_map() on done?
}).fail(function() {
// call init_map() on error?
}).always(function() {
// call init_map() regardless the response?
})
Also, you're using google.maps.event.addDomListener to add a listener during window load. If you're sure that your page is loaded before making the ajax post, you don't need this listener. You'll only need to create a new map inside the init_map function.

How to assign unique IDs to drawn GeoJson features and then remove them based on their ID?

I'm trying to assign a unique ID to each feature that gets drawn on this Google Map, and then use the rightclick event to remove the feature that gets clicked on. Currently all features get removed, which is a problem.
Once the feature is added to the collection, I try to assign the unique ID:
var uniqueID = function() {
return ++currentID;
}
dataLayer.addListener('addfeature', savePolygon, function(event) {
event.feature.setProperty('featureID', uniqueID);
});
Then on rightclick event, I want to remove the feature that gets clicked on. I assumed you would need to have unique IDs for this step, hence the prior step.
dataLayer.addListener('rightclick', function() {
dataLayer.forEach(function(feature) {
dataLayer.remove(feature);
localStorage.removeItem('geoData');
});
});
Full code below.
JS:
var map;
var currentID = 0;
var uniqueID = function() {
return ++currentID;
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 4,
// only show roadmap type of map, and disable ability to switch to other type
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
map.data.setControls(['Polygon']);
map.data.setStyle({
editable: true,
draggable: true
});
bindDataLayerListeners(map.data);
//load saved data
loadPolygons(map);
}
// Apply listeners to refresh the GeoJson display on a given data layer.
function bindDataLayerListeners(dataLayer) {
dataLayer.addListener('addfeature', savePolygon, function(event) {
event.feature.setProperty('featureID', uniqueID);
});
dataLayer.addListener('rightclick', function() {
dataLayer.forEach(function(feature) {
dataLayer.remove(feature);
localStorage.removeItem('geoData');
});
});
dataLayer.addListener('setgeometry', savePolygon);
}
function loadPolygons(map) {
var data = JSON.parse(localStorage.getItem('geoData'));
map.data.forEach(function(f) {
map.data.remove(f);
});
map.data.addGeoJson(data)
}
function savePolygon() {
map.data.toGeoJson(function(json) {
localStorage.setItem('geoData', JSON.stringify(json));
});
}
initMap();
Original source: I built this example from a JSFiddle found in this thread.

your addfeature listener was wrong, as addListener takes only a single callback function, so you need to call e.feature.setProperty then savePolygon inside a single anonymous callback function
Note, you had event.feature.setProperty('featureID', uniqueID); - it needs to be event.feature.setProperty('featureID', uniqueID());
dataLayer.addListener('addfeature', function(event) {
event.feature.setProperty('featureID', uniqueID());
savePolygon(event);
});
Then, in the rightclick lsitener, you can simply get the geoData - filter out the clicked item, save the geoData and then dataLayer.remove(e.feature);
dataLayer.addListener('rightclick', function(e) {
var data = JSON.parse(localStorage.getItem('geoData'));
data.features = data.features.filter(function(feature) {
return feature.properties.featureID !== e.feature.getProperty('featureID');
});
localStorage.setItem('geoData', JSON.stringify(data));
dataLayer.remove(e.feature);
});
working fiddle

Get element ID from url hash and fire it's click handler

I would like to grab an element based on the url hash, and fire the click of that element. I must be missing something, because I get the error:
Uncaught TypeError: Property '$' of object [object Object] is not a function
Here's the code
jQuery(function($){
function doUrl() {
var urlHash = window.location.hash;
if (urlHash != '') {
if ( $(urlHash).length > 0 ) {
$(urlHash).trigger('click');
}
}
}
doUrl();
});
}); // jquery
It seems that the error stems from urlHash not being an appropriate type of element to feed into $(). But the console tells me that the urlHash variable holds what I would expect it to: "#someClickableElement".
When I manually replace the urlHash variable with '#somepageid', the click event still does not fire on page load like I'd expect. So just to clarify, this does not work either:
$(function(){
$('#someClickableElement').click();
});
I can't quite tell where my problem is.
Edit
For those of you who want to see the whole code, here's a lot more of it:
var map;
function initialize() {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(xxx,xxx),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false,
mapTypeControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
// navigationControl: true, // (this is the pan and zoom together)
};
map = new google.maps.Map(document.getElementById('map-area'), mapOptions);
}
// init map
google.maps.event.addDomListener(window, 'load', initialize);
function findMapItem(lat,lon) {
var buildingLoc = new google.maps.LatLng(lat,lon);
map.panTo( buildingLoc );
removeAllMarkers();
// add new marker
buildingMarker = new google.maps.Marker({
map: map,
position: buildingLoc,
clickable: true,
icon: pathToAssets + 'bobcatMarker2.png'
//title: ,
})
buildingMarkers.push(buildingMarker);
}
jQuery(function($){
$('.mapItemsControls a').click(function(){
if ( $(this).hasClass('layerOn') ) {
$(this).removeClass('layerOn');
} else {
$('.mapItemsControls a').not(this).removeClass('layerOn');
$(this).addClass('layerOn');
}
doHistory( $(this).attr('href') );
return false;
});
$('#mapNav .findMapItem').click(function(){
var lat = $(this).data('lat');
var lon = $(this).data('lon');
if (lat != '' && lon != '') {
findMapItem(lat,lon);
}
});
function doUrl() {
var urlHash = window.location.hash;
if ( jQuery(urlHash).length > 0 ) {
jQuery(urlHash).trigger('click');
}
}
doUrl();
});

Make sure your click handler declaration comes before the doUrl() function call.
You can also greatly simplify that doUrl() function.
Click here for a working fiddle.
jQuery(function($){
$('#test').click(function() {
alert('No problems.');
});
function doUrl() {
$(window.location.hash).trigger('click');
}
doUrl();
});

I solved the problem by putting calling the function doUrl() inside the Google Maps init block. The functions that the click handler were calling were part of the google maps object and therefore couldn't fire until the Map had been initialized.

Map displayed partly gray

In my form I have the tab type Togglable tabs front-end Bootstrap. With each click of the tab, I need to display the maps, which unfortunately are displayed in gray part. The code used:
#Using Ajax.BeginForm("Index", New AjaxOptions() With { _
.UpdateTargetId = "AnswerSN",
.HttpMethod = "POST"
})
#<Script>
init("tab1");
function ChangeDiv(whoDiv) {
if (whoDiv.href.indexOf("#tab1") != -1) {
$(".mezzouno").attr("id", "old-map")
$(".flottauno").attr("id", "basic-map")
clearTimeout(TimeR)
init("tab1");
} else if (whoDiv.href.indexOf('#mezzo1') != -1) {
$(".flottauno").attr("id", "old-map")
$(".mezzouno").attr("id", "basic-map")
clearTimeout(TimeR)
init("mezzo1");
}
}
var TimeR;
function Fleet() {
var updateUrl = '#Url.Action("FleetVb", "Home")';
$.ajax({
url: updateUrl,
success: function (result) {
FleetJs(result);
},
cache: false
});
clearTimeout(TimeR)
TimeR= window.setTimeout("Fleet()", 60000);
}
function Vehicle() {
var updateUrl = '#Url.Action("PointVb", "Home")';
$.ajax({
url: updateUrl,
success: function (result) {
initialize(result);
},
cache: false
});
clearTimeout(TimeR)
TimeR= window.setTimeout("Vehicle()", 60000);
}
function init(whoDiv) {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(41.895122, 12.481627),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: false,
scaleControl: true
};
map = new google.maps.Map(document.getElementById("basic-map"), myOptions);
google.maps.event.trigger(map, 'resize');
if (whoDiv== 'tab1') {
window.setTimeout("ProvaFlotta()", 1000);
} else if (whoDiv== 'mezzo1') {
window.setTimeout("Prova()", 1000);
}
}
</script>
#<div id="AnswerSN" style="position:absolute; top:100px"></div>
End Using
Where do I handle the click of the tab and under it and check the id of the map?
Unfortunately, I get this:
You can bring up the full map and not gray?

enlarging the browser window, the map becomes visible, click on the tab I see the other map with the gray back and widening the window visible.
How do I make it always visible? There seems to be something that goes in conflict ....
Help

Then,
the resize I plugged in the two functions "Fleet()" and "Vehicle()" using another variable of type Boolean, so that the resize is done only once. The calls to these two functions are performed by "init()" with a timer of 200 milliseconds so that the map may not be displayed in gray.
Thank you again.