Mapkit JS can't move map on mobile phone - javascript

I'm trying use Mapkit JS for map. The code I have works fine on desktop. However, there is one problem when test it on a mobile phone. It seems that I cannot move the map around using my finger. On the desktop, I can move around the map with my mouse.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
done("API KEY");
},
language: "en"
});
var map = new mapkit.Map('map', {
showsMapTypeControl: false,
showsCompass: mapkit.FeatureVisibility.Hidden
})
var coordinateRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.51415196691954, -74.43808765761719),
new mapkit.CoordinateSpan(1.234, 1.23423)
);
map.region = coordinateRegion;
</script>
</body>
</html>

Mapkit JS versions occasionally have trouble recognizing touches from Android phones. You can test this in the Chrome developer panel. The fix is to change the version you are using.
As of the time of this writing, 5.19.x is the latest version that supports Android and 5.20.0 currently does not.

Related

Local HTML files with simple OpenLayers maps will not open in IOS but will open on all other platforms

I am currently using OpenLayers to send maps to friends and fellow disaster relief volunteers via email. Below is a very simple example of the code I am using as a basis for displaying the maps. I save the below code in an html, send it attached to an email, and when they open it as a local html file on their device, it normally opens and displays without a problem. .
However, about 1.5 years ago, IOS stopped working. Any clues?
Please, take the time to look at the code. I did some tracing, and it seems that there's an https reference somewhere in OpenLayers that the IOS webviewer component doesn't like. Of course, my maps have features added to the source and vector layers, but below is the simplest example just to prove the point that the IOS browser doesn't display the maps, whilst PC, Mac, and Android browsers do. I've tried saving to a folder and then opening in Chrome on IOS, but still, no joy.
I have used 5.3.0 up until IOS stopped working. The current version 6.4.3, and it has the same symptoms.
Thanks in advance for your time!
<!DOCTYPE html>
<html>
<head>
<title>Example Map</title>
<link rel='stylesheet' href='https://openlayers.org/en/v6.4.3/css/ol.css' type='text/css'>
<script src='https://openlayers.org/en/v6.4.3/build/ol.js' type='text/javascript'></script>
<style>
html, body, #map {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map" >
</div>
<script>
'use strict';
var mapview = new ol.View({ center: [-11000000, 4600000], zoom: 4 });
var raster_layer = new ol.layer.Tile({
source: new ol.source.OSM({
url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
})
});
var map;
var vector_source = new ol.source.Vector();
var vector_layer = new ol.layer.Vector({ source: vector_source });
map = new ol.Map({layers: [raster_layer, vector_layer], target: 'map', view: mapview});
</script>
</body>
</html>

Why do Here Maps JS events stop firing when loaded into a .NET WebBrowser control?

I have an interactive Here Maps map running in Legacy mode, with a tap event listener added, like so:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
</div>
<script type="text/javascript">
// Initialize the platform object
var platform = new H.service.Platform({
// We use a real API key but it's not included here for obvious reasons
'apikey': 'notARealAPIKeyPleaseSubstituteForARealOne'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object
// Using raster maptype and P2D for compatibility with IE11
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.raster.normal.map,
{
zoom: 12,
center: { lat: -33.81, lng: 150.78 },
pixelRatio: window.devicePixelRatio || 1,
engineType: H.map.render.RenderEngine.EngineType.P2D
});
// Add a default UI to the map
var ui = H.ui.UI.createDefault(map, maptypes);
// Make the map draggable
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Add a listener for the 'tap' event on the map
map.addEventListener("tap",
function (evt) {
console.log("Map tapped!", evt)
});
</script>
</body>
</html>
This works all well and fine in browsers like Chrome and IE11, with the map being draggable and tap event details being logged to the console. However, as soon as this page is added as the URL for a .NET WebBrowser control in a WinForms project, the map dragging and tap events suddenly stop working, with no errors being logged to the console. It's almost as if something there is preventing the map events from firing for some reason.
I've already tried the registry hack detailed in this post to force the WebBrowser in the WinForms app to use IE11 without IE7 Compatibility Mode (and verified this was applied properly with a user agent checker), to no avail. I've also tried running the page as it's loaded into the WinForms app in the Visual Studio debugger, and it's definitely hitting the addEventListener line with no problems. The last thing I tried was adding a button to the page with a click event, and this works fine too.
I feel like I'm running out of options here. Is there something I'm overlooking, or is there some weird behaviour in WebBrowser controls that would prevent these events from firing? If so, is there a way around it?
Legacy support1:
Internet Explorer 9, 10, 11
iOS WebView desktop
iOS 11+
To know more about the browser support for JS APIs, please refer : https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/why-use.html

Cryptowat.ch Embed API freezing all browsers

I am trying to make a local html file so that I can embed Cryptowat.ch's embed API into a desktop application through a webview.
I have found an NPM package that demonstrates how to use the API, and it seems really easy. It even comes with a sample JSFiddle.
Before digging into any of the customization I simply copied the JSFiddle to a local file:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#chart-container {
width: 550px;
height: 186px;
}
</style>
<div id="chart-container"></div>
<script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script>
<script type="text/javascript">
function loadChart() {
var chart = new cryptowatch.Embed('gdax', 'btcusd', {
timePeriod: '30m',
width: 550,
height: 186
});
chart.mount('#chart-container');
}
window.onload = loadChart;
</script>
</body>
</html>
It works fine in the JSFiddle, but it doesnt work in ANY browser I've had installed. On Chrome, I see the chart, but no data and the page becomes unresponsive. On Firefox I only see a black square. On Internet Explorer, it's just a blank page.
Is there something obvious I'm missing?
There simply seemed to be a momentary blip in the API.
I was experiencing the exact same issues as you described, using your above code.
Without modifying the code at all, it now appears to be working correctly.

Unable to Display Google Map in Liferay 7 MVC Portlet

Here is my view.jsp, it is just the example from Google. I wanted to just get this to display before moving forward with it:
<%# include file="/init.jsp" %>
<p>
<b><liferay-ui:message key="mapsportlet_mapsPortletmvcportlet.caption"/></b>
</p>
<DOCTYPE! html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 20%;
margin: 0;
padding: 0;
}
#map {
height: 20%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeekwNluL4ssJ3QAFGPSkFHYYQvZoNbVM&callback=initMap"
async defer></script>
</body>
</html>
I'm running a local instance of liferay 7 on localhost:8080. I believe the JavaScript is firing because I did not have my API key set correctly and I could see in the javascript console that it was being denied. After fixing my API key, I no longer see any errors in the console of the browser, but I don't see the map display in my Portlet.
Do you see anything wrong with the view.jsp? Or is there another way I should be going about this?
You're tagging this question with "liferay", so I'm assuming that you're using the JSP you post as a portlet's view. A portlet must never contain <html>, <head> or <body> because this markup will be added by the portal.
Also be careful with the map id: If you add the same portlet to the page twice, this won't work as well as you'll end up with a duplicate HTML element id. If this ends up being a problem, utilize <portlet:namespace/> to make the identifier unique. You might also want to try if some other portlet adds this id already. It might be working already, just being invisible - depending on where this id has currently been used already.
Also, I'm not sure if the <style> will or will not be ignored when contained in a superfluous <html><head> section. Try by explicitly styling your <div> with an appropriate height.

Overcoming domain access issues with Webbrowser Control in MS Access

I've developed a database application in MS Access 2010 that has an embedded WebBrowser Control which is used to view a local web page. The page uses the Google Maps API to provide some unique mapping capabilities and I use the web browser control to access javascript in the webpage to pass map data between the database and the webpage that renders it.
However, I've been running into the "Access is Denied" cross-domain error that I can't resolve. I recall addressing this before, and it involved adding a "Mark of the Web" comment and ensuring the appropriate IE compatibility mode - both of which I've done.
The HTML file is locally loaded, and it includes a series of javascript files in a separte folder (also local). The javascript files use the google maps API to populate the map in the web browser control
Anyway, see below for the index.html file that the webbrowser control directly loads inside MS Access. There's a lot of code overall, so I don't want to spam the thread until I have a better idea of what I should be looking for.
Incidentally, I am using an HTMLWindowProxy object from within VBA to directly call the loaded javascript functions embedded in the web pages.
Specifically, from within VBA, I call:
Call proxyWindow.execScript mScriptName
or
Call proxyWindow.Navigate mScriptName
It's this call that generates the error.
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.gm-style-iw {
min-width: 150px;
}
</style>
</head>
<body>
<div id="pathData">
<input type="hidden" id="docReadyState" value="unset">
<input type="hidden" id="default_position"
data-lat=41.843435 data-lng=-89.481619>
<input type="hidden" id="location_address" value="">
</div>
<div id="map-canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=REDACTED"></script>
<script src="js/html.js"></script>
<script src="js/BindableBase.js"></script>
<script src="js/mvcarraybinder.js"></script>
<script src="js/ButtonControl.js"></script>
<script src="js/ElementOptions.js"></script>
<script src="js/SectionMarker.js"></script>
<script src="js/SectionPolyline.js"></script>
<script src="js/SectionMap.js"></script>
<script src="js/main.js"></script>
<script>
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById ("docReadyState").value = "ready";}
else {
document.getElementById("docReadyState").value = "busy";}
}
</script>
</body>

Categories