I have a secure site that is using MarketCusterer for clustering markers! When viewing the page, I was getting the view only secure bits or see them all as I understand the icons are stored on a non-secure site.
I've located the icons, included in my ASP.NET MVC project and setup the necessary routes to allow access to the images. My problem is, once I add the styles (code below), nothing is displayed. I moved the images out of the MVC site onto our corporate public site and ensured I could get to the URL and still nothing was displayed. When I zoomed out far enough for the fourth image to be displayed, the standard google one appeared.
Having stepped through the code debugging, I can see my styles are being passed through correctly to the markerclusterer.js as expected.
Am I doing something wrong?
Thanks
Simon
var clusterStyles = [
{
opt_textColor: 'black',
url: 'http://www.mywebsite.com/images/m1.png'
},
{
opt_textColor: 'black',
url: 'http://www.mywebsite.com/images/m2.png'
},
{
opt_textColor: 'black',
url: 'http://www.mywebsite.com//images/m3.png'
}
];
var mcOptions = { styles: clusterStyles };
var markers = [];
Loop to add markers
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
For anyone interested it appears it was because the height and width values were missing. I had thought these were optional parameters but it seems they need to be there!
hHanks for looking.
Simon
Related
I have a line string that needs to be displayed. It is a collection of GeoJSON data.
I have a problem where this works fine when opened in the browser, but when I open it in the mobile browser, the line that I am adding is not displayed.
Function that adds routeLayer
const route = new LineString(breaks)
route.transform('EPSG:4326', 'EPSG:3857');
const routeFeature = new Feature({
type: 'route',
geometry: route,
});
const features = [routeFeature];
routeFeature.setStyle(mainRouteStyle);
const mainRouteVector = new VectorLayer({
source: new VectorSource({
features,
}),
});
map.addLayer(mainRouteVector);
I couldn't find anywhere what is wrong, I don't have any errors. I am adding geo markers also with the same method and they are displayed. I also tried putting a simple line that connects 2 coordinates and it is also not shown when I add it later with addLayer but when I include that in layers when initializing the map, it is shown.
Keep in mind that on desktop browser it is working fine, but on mobile it has problems. Does anybody know what is the issue?
Ok, turns out this was not the issue with OpenLayers, I had targeting localhost to get the geojson data, which on mobile is obviously not localhost.
I am using Google Satellite map on an application. It was working fine and suddenly the map images start not showing. Instead of the terrain images, the map is showing the message "Sorry, we have no imagery here".
It is happening on my office IP and other testers' IPs. If I access from another IP or mobile data it works and shown the satellite images. I am not sure if google blocks IPs in case of continuous access on the maps.
Also I am able to see a lot of errors accessing the images
While clicking on the links for loading images, I am getting an error page like below instead of the map tile image.
Any clues on this issue is appreciated
To avoid showing these errors, in case they are due to the use of a zoom level that is too high for the area you are viewing, you can use the MaxZoomService. Kindly note that the below code snippet doesn't work because apparently access to the service without an API key is not possible.
Copy the code and test it with a working API key.
var map, maxZoomService;
function initialize() {
maxZoomService = new google.maps.MaxZoomService();
var myLatLng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'idle', function() {
checkZoom();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
checkZoom();
});
}
function checkZoom() {
let zoom = map.getZoom();
maxZoomService.getMaxZoomAtLatLng(map.getCenter(), function(response) {
if (response.status !== 'OK') {
alert('maxZoomService error: ' + response.status);
document.getElementById('max-zoom').innerHTML = 'n/a';
document.getElementById('max-zoom-service').innerHTML = response.status;
} else {
if (response.zoom < zoom) {
map.setZoom(response.zoom);
document.getElementById('max-zoom').innerHTML = response.zoom;
document.getElementById('max-zoom-service').innerHTML = response.status;
}
}
document.getElementById('curr-zoom').innerHTML = map.getZoom();
});
}
initialize();
#map-canvas {
height: 130px;
}
span {
font-weight: bold;
}
<div id="map-canvas"></div>
Current Zoom Level: <span id="curr-zoom"></span><br>
Max Zoom Level: <span id="max-zoom"></span><br>
Max Zoom Service Status: <span id="max-zoom-service"></span>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
If the zoom level is not the issue, make sure that you are using a valid API key. In any case, it might be worth creating a new key and trying again with that one. If that still doesn't work, I would try to contact Google directly with more information as it might be that your network IP or IP range was banned by Google for some reason.
I know this is an old question but, I recently got this error too. So, the problem, in my case was the version of the API script I was using.
I'm answering this because I didn't found this solution over here, so, just in case someone was getting the same error.
Just adding v=3.35 (version number) to the url and it works.
Example: https://maps.googleapis.com/maps/api/js?v=3.35&key=API_KEY...
They explain here:
https://developers.google.com/maps/documentation/javascript/versions#an-update-affected-my-application
Thank you for all the response and I was able to find and fix the real issue. Adding the details here for reference.
I have contacted Google support with the request details and they were able to figure out the exact problem. The reason is their image servers are blocking the request from this project (hybrid mobile project - Android) since it found out that there are invalid request is also coming from the project. The invalid request is referred to as the requests without proper header information.
Based on that information, I could find out that a caching mechanism in the project was trying to cache the images and that is which sends the invalid requests. Adding proper header to that cache mechanism solved the issue forever.
I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?
You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.
I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!
Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.
you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);
You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser
I am working on an app using Django, Leaflet, OSM and jQuery. The app displays a map with markers and a table with all the marker data (time, lat, lng).
I want to automatically update the table and the map markers without reloading the whole page (I basically want to eliminate the flickr of the map tile layer, and the database is constantly being updated by some randomly generated data inside model.py), but I ran into the following problems.
When I use refresh() on only the table div, somehow my whole
wrapper div gets recursively embedded inside my table div, and everything (both map and table) refreshes.
I wrote an updateMarker() function to update my markers, but it doesn't seem to work.
I have my setInterval time interval at 5 seconds, but the div doesn't actually refresh every 5 seconds. More like every 1/2 second or something way too fast.
Since my app connects to OSM for the map tiles, is it possible for all these "GET" queries to eat up my bandwidth? After letting the program run for a while, I realized I could no longer load Google and the wifi was still good. After a little longer, localhost started crashing like crazy. I restarted my computer twice and checked the internet setting 5 times, and localhost still crashes when I have the map related scripts enabled. When I comment out the map part of the code, however, my localhost seems fine for the most part, just a bit choppy and problem#3 still stands.
EDIT: Adding to #4, every time I start runserver now (with map
related code), the terminal output gets stuck at [14/Aug/2013
03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744
and localhost just goes Aw, Snap. :(
MORE EDIT: IT JUST FIXED ITSELF??! I didn't do anything...
The EDITED refresh AJAX code:
function refresh() {
$.ajax({
url: '/#table',
success: function(data) {
$('#result').html(data); //adding an extra #result div to wrap #table
setInterval(refresh, 5000); //actually setting the refresh rate to 5s...
}
});
}
setInterval(refresh, 5000);
EDITED updateMarkers inside my .js file,
// group markers to a layer and add the layer to map
function updateMarkers(LatLngArray) {
// if (myLayer){
// map.removeLayer(myLayer);
// }
$.ajax({
url:'/#map',
success: function(){
for (i=1;i<=LatLngArray.length;i++) {
myIcon = L.icon({iconUrl: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+i+'|666699|FFFFFF'});
layArray.push(L.marker([LatLngArray[i].lat, LatLngArray[i].lng], {icon: myIcon}).bindPopup('<center><br>[LatLngArray[i].lat, LatLngArray[i].lng}}]</center>'));
}
myLayer = L.layerGroup(layArray);
map.addLayer(myLayer);
}
});
}
Another somewhat relevant question, I followed OSM's Leaflet Guide to try to set up "marker showing while user panning" feature, but it doesn't work. When I pan around the map, say starting from the US and move east until I see the US again, all of my markers that were on the US from the other side can no longer be seen. I literally just copied the code. Inside the initmap() function it looks like this:
function initmap() {
// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 15, attribution: osmAttrib});
// start the map centering around the mediterrean
map = new L.Map('map', {
center: new L.LatLng(37.16, 18.87),
zoom: 2,
layers: [osm]
});
askForPlots();
map.on('moveend', onMapMove);
}
Sorry for the long post...I can't really do much at the moment as my chrome is still showing the Aw, Snap!
So long post O.o
Lets start with When I use refresh() on only the table div...
Are you sure with your ajax function? I would rather do something like this:
function refresh() {
$.ajax({
url: '/ #table', // this should grab only #table element...
success: function(data) {
// ...and it will insert it inside #result element
$('#result').html(data);
setTimeout(refresh, 5000);
}
});
}
setTimeout(refresh, 5000);
html structure update:
<div id="result">
<div id="table">
...
I have not been able to successfully display my side database (map from Mapsengine/Earthbuilder). I have installed Google Plugin and tried to access it from Firefox, Chrome, and IE browsers and nothing seems to work. I am not sure what I'm doing wrong as I have confirmed my code with the code used in Google's Code Playground, and I have attempted a workaround that was suggested in a similar issue from the past (Issue 21: GMaps Engine Layer Disappeared over GEarth plugin). When specifing the URL of my map to be displayed in GE plugin, I even changed the URL to include &export=download, which is one of the fixes I saw in another similar issue (it was about kml files from google docs).
Strangely, when my webpage is accessed, it does not give an error that the side database failed to download.
I have included part of the code below.
Any assistance would be greatly appreciated.
Thanks in advance,
<script type="text/javascript">
var CHO;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
CHO = instance;
CHO.getWindow().setVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_BORDERS, true);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_ROADS, true);
addSideDatabase()
// Add controls for the window
CHO.getOptions().setStatusBarVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
// Update the view in Google Earth
var lookAt = CHO.createLookAt('');
lookAt.setLatitude(30.0);
lookAt.setLongitude(-90.0);
lookAt.setRange(9500000); //default is 0.0
CHO.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
function sideDatabaseSuccess(db) {
sideDatabase = db;
db.setDrawOrder(2);
}
function sideDatabaseFail() {
alert('Sorry! Side database failed to load!');
}
/** Add the URL for the globe served by Earth Enterprise or Earth Builder.
* This function operates similarly to the File => Add Database feature
* in Google Earth EC.
*/
function addSideDatabase() {
google.earth.addSideDatabase(
CHO, "https://mapsengine.google.com/map/edit?mid=zHgXRX6Mts2Q.kHGFoYZlcyBQ&export=download",
sideDatabaseSuccess,
sideDatabaseFail,
{
userName: '',
password: ''
}
);
}google.setOnLoadCallback(init);</script>
Is that URL for a Google Maps Engine Lite map? If so, that might be the issue. I just tried swapping in the URL (https://earthbuilder.google.com/10446176163891957399-13516001307527776624-4/kh/) used in the Google Code Playground example here http://code.google.com/apis/ajax/playground/#adding_a_side_database. That one worked, but my Google Maps Engine Lite URL didn't. Furthermore, it didn't even seem to call its success or failure callback functions!
The thing you are trying to load is a map, not a globe. The two are not equivalent. You can't load a map in Google Earth.
On the bright side, your side-loading code is spot on. Replace your URL with http://laearth.la.gov (Louisiana's Custom Google Earth Server) and it will work.