Working on mapboxgl with ionic3, angular4 and cordova.
I have build .apk and .ipa files. I installed .apk file in my android device it works as expected (ie mapbox tiles, my icons (I have added some icons to custom some functionalities for eg. added an icon to switch the map style) and my markers are loaded successfully).
When I install the .ipa file in my Iphone my icons only loaded but mapbox tiles not getting loaded. Also the markers. I get blank white screen.
What is wrong with my implementation?
let data = {myJson data};
mapboxgl.accessToken = 'My access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
attributionControl: false,
center: [-74.50, 40],
zoom: 12
});
map.on('load', function () {
map.addSource("place", {
type: "geojson",
data: data,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
"id": "places",
"type": "circle",
"source": "place",
"paint": {
"circle-radius": 7,
"circle-color": "#32CD32",
"circle-stroke-width": 4,
"circle-stroke-color": "#FFFFFF"
}
});
});
Can you help with me with the code added here?
This code works fine in Android. I mean map is loading as expected. But in Iphone My app is working but Map is not loading. Any guess what is wrong?
please check in info.plist for key MGLMapboxAccessToken is set with proper token. this is very important to set this value.
If you don't have source code even thought you can check by extraction IPA. below are step to extract IPA.
Change extension from IPA to ZIP.
Extract zip file
In payload you will find app. right click on it and click on show package contents
Open info.plist and search for key and it's value.
I hope you will get your answer
I'm trying to implement a local copy of a TileJSON in an iOS app through Cordova. The issue I'm having is that OpenLayers doesn't seem to recognise the JSON file as valid and thus doesn't show any tiles. I have tried local and remote versions of the same TileJSON and looked at the Console Logs, the local one has a status of "error" (but no explanation as to what that error might be...).
I think the issue is down to the fact that the JSON file is being loaded using a file: URL, rather than http:. I have put the JSON file on a remote server and this not only loads fine but actually loads the tiles from the local path.
Can OpenLayers be tricked into accepting the local file as a valid JSON file? Can Cordova be forced to load local files via HTTP? I think either of these options would fix the issue.
Thanks
EDIT: Here's the code I'm using to load the TileJSON:
var mapLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: getPhoneGapPath() + 'tiles.json',
crossOrigin: 'anonymous'
})
});
this.map.addLayer(mapLayer);
function getPhoneGapPath() {
var path = window.location.pathname;
path = path.substr( path, path.length - 10 );
return path;
}
The getPhoneGapPath() function is used to get the path to the webroot of the Cordova app.
This is probably related to a bug in OpenLayers, https://github.com/openlayers/ol3/issues/5647. The fix will be in the next release.
Also make sure that you configure Cordova to allow access to file:// urls when the application is served from a file:// url. The equivalent option in Chrome is --allow-file-access-from-files.
I have a question regarding creating a style object in openlayers 3. If Source of the Icon is given relative path its working fine.
var image = new ol.style.Icon({
src : 'app/images/test.png'
});
var style = new ol.style.Style({
image : image
});
But if i give it absolute path its not taking it even if the image exists in that path.
var image = new ol.style.Icon({
src : 'C:/test.png'
});
var style = new ol.style.Style({
image : image
});
Please tell me am i missing something? Thanks in advance
I can't post comments because I don't have enough privilages, but when you say you are serving from the local file system, I assume your page url begins with file:/// (i.e., you are using file protocol) and not http://localhost (http protocol)? Because, due to browser security limitations accessing system files when you are using http protocol will not work. If you are using file protocol, have you tried using the prefix file:///? Also, these SO questions might help: Why can't I do <img src="C:/localfile.jpg">? and How do I view file:// images from http://localhost served pages in Firefox 11?.
I have exported a vector file in QGIS to GML format and now, Openlayers 3 cannot open that file and display it.
I tried other things like ol.format.GML2() or ol.format.GML3(), but no help.
(OpenLayers can fetch that file from server, but does not displays it. It can display other layers with the same extent).
layer = new ol.layer.Vector({
title: 'myvector',
source: new ol.source.Vector({
url: 'myvector.GML',
format: new ol.format.GML()
})
});
I just tried myself, and it looks like none of the GML flavours generated by QGIS is understood by OpenLayers. My suggestion would be to use GeoJSON instead, which is what I always do.
I try to build an app that let's users select rectangles on a google Map. The coordinates should than be extracted and used for further calculations. I found an excellent tutorial here on how to interact with the google api and send the data to R. However, I needed to modify the files a bit to have a costum ui.R that lets the user select the fields but also select other options important for processing.
So now I have three files in the same directory.
The html file with the javascript commands for the google api, the ui.R and the server.R.
index.html
content can be found in the link above but the important part is:
//This function listen to the drawing manager and after you draw the rectangle it extract the coordinates of the NE and SW corners
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
//The following code is used to import the coordinates of the NE and SW corners of the rectangle into R
Shiny.onInputChange("NE1", ne.lat());
Shiny.onInputChange("NE2", ne.lng());
Shiny.onInputChange("SW1", sw.lat());
Shiny.onInputChange("SW2", sw.lng());
ui.R
I use tags$embed to embed the index.html file in ui.R
require(shiny)
shinyUI(
fluidPage(
titlePanel("Included Content"),
# mainPanel(
fluidRow(
column(9,
div(style='height:800px; width:1200px; overflow: hidden',
tags$embed(src="./index.html", seamless=FALSE,width="100%",height="100%"))),
column(3,
h2("Some Calculations"),
selectInput("Test",label=NA,choices=c("yes","no")),
selectInput("Test2",label=NA,choices=c("2","3")),
h3("Coordinates"),
tableOutput("test"),
h3("allInput"),
tableOutput("test2"))
)
))
server.R
# server.R
library(sp)
library(rjson)
library(shiny)
library(dplyr)
library(tidyr)
shinyServer(function(input, output,session) {
CorLongLat<<-reactive({
if(length(input$NE1)>0){
as.data.frame(matrix(c(input$NE2,input$NE1,input$NE2,input$SW1,input$SW2,input$SW1,input$SW2,input$NE1),ncol=2,byrow=T))
}
})
output$test<-renderTable({
CorLongLat()
})
output$test2<-renderTable({
as.data.frame(reactiveValuesToList(input))%>%gather(ID,Value)
})
})
However, if I try to disply all inputs via output$test2<-renderTable({
as.data.frame(reactiveValuesToList(input))%>%gather(ID,Value)
})
it showes only the controls that are directly embeded in the ui.R. How do I access the variables NE1,NE2,SW1,SW2 from index.html that are created via Shiny.onInputChange?
EDIT
In the meantime I got a little closer to the core of the problem. Running the App with options(shiny.trace=TRUE) tells me after launching the app the following
Listening on http://127.0.0.1:4840
SEND {"config":{"workerId":"","sessionId":"16000363ddc17409cd5fdf25c038b61d"}}
RECV {"method":"init","data":{"Test":"yes","Test2":"2",".clientdata_output_test4_hidden":false,".clientdata_pixelratio":1,".clientdata_url_protocol":"http:",".clientdata_url_hostname":"127.0.0.1",".clientdata_url_port":"4840",".clientdata_url_pathname":"/",".clientdata_url_search":"",".clientdata_url_hash_initial":"",".clientdata_singletons":"",".clientdata_allowDataUriScheme":true}}
SEND {"errors":[],"values":[],"inputMessages":[]}
SEND {"config":{"workerId":"","sessionId":"0881062c26c882de2d0648a96ed98296"}}
RECV {"method":"init","data":{".clientdata_output_json_hidden":false,".clientdata_pixelratio":1,".clientdata_url_protocol":"http:",".clientdata_url_hostname":"127.0.0.1",".clientdata_url_port":"4840",".clientdata_url_pathname":"/index.html",".clientdata_url_search":"",".clientdata_url_hash_initial":"",".clientdata_singletons":"",".clientdata_allowDataUriScheme":true}}
SEND {"errors":[],"values":[],"inputMessages":[]}
After selecting a triangle on the map I get
RECV {"method":"update","data":{"NE1":67.40748724648756,"NE2":-11.77734375,"SW1":62.552856958572896,"SW2":-26.9384765625}}
And after selecting on selectInput :
RECV {"method":"update","data":{"Test2":"3"}}
I think the problem here is the second sessionID that is established. How do I refer to those in server.R or how do I combine both into on?