Displaying marker in middle of openstreetmap polygon (iOS)
I'm trying to create an application which will display children playground. I found that open street map actually has pretty good data for this.
So I used the http://overpass-turbo.eu to extract the data.
I then am using mapbox to display the data.
Unfortunately i'm a beginner with openstreetmap and associated SDKs.
The problem I'm running into is that some of those park are polygons. I just want to be able to display a marker on the map where the park is, not draw the shape of the park.
I followed this tutorial from mapbox to display circles on the data point, but it's drawing a circle on every coordinate in the polygons...
SO how can i either tell mapbox to add just an image in the center of the polygon? Do I have to modify the data I get from overpass? Can I query overpass differently to only get centroids?
Thanks for any pointers
EDIT
I was asked to add code. Really the code does not have much yet, so i don't think it has much value here as I'm asking for what is teh best approach to the problem. This is the delegate to add teh source that contains the data (in swift)
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let source = MGLVectorTileSource(identifier: "export-ddqmvm", configurationURL: URL(string: "mapbox://mobdesign.9zilzleo")!)
style.addSource(source)
let layer = MGLCircleStyleLayer(identifier: "landmarks", source: source)
layer.sourceLayerIdentifier = "export-ddqmvm"
layer.circleColor = NSExpression(forConstantValue: #colorLiteral(red: 0.67, green: 0.28, blue: 0.13, alpha: 1))
layer.circleOpacity = NSExpression(forConstantValue: 0.8)
style.addLayer(layer)
}
Also here is the tutorial I got this code from: https://www.mapbox.com/help/ios-dds-circle-layer/
ios mapbox openstreetmap overpass-api
add a comment |
I'm trying to create an application which will display children playground. I found that open street map actually has pretty good data for this.
So I used the http://overpass-turbo.eu to extract the data.
I then am using mapbox to display the data.
Unfortunately i'm a beginner with openstreetmap and associated SDKs.
The problem I'm running into is that some of those park are polygons. I just want to be able to display a marker on the map where the park is, not draw the shape of the park.
I followed this tutorial from mapbox to display circles on the data point, but it's drawing a circle on every coordinate in the polygons...
SO how can i either tell mapbox to add just an image in the center of the polygon? Do I have to modify the data I get from overpass? Can I query overpass differently to only get centroids?
Thanks for any pointers
EDIT
I was asked to add code. Really the code does not have much yet, so i don't think it has much value here as I'm asking for what is teh best approach to the problem. This is the delegate to add teh source that contains the data (in swift)
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let source = MGLVectorTileSource(identifier: "export-ddqmvm", configurationURL: URL(string: "mapbox://mobdesign.9zilzleo")!)
style.addSource(source)
let layer = MGLCircleStyleLayer(identifier: "landmarks", source: source)
layer.sourceLayerIdentifier = "export-ddqmvm"
layer.circleColor = NSExpression(forConstantValue: #colorLiteral(red: 0.67, green: 0.28, blue: 0.13, alpha: 1))
layer.circleOpacity = NSExpression(forConstantValue: 0.8)
style.addLayer(layer)
}
Also here is the tutorial I got this code from: https://www.mapbox.com/help/ios-dds-circle-layer/
ios mapbox openstreetmap overpass-api
1
Please provide a link to the tutorial you followed, also any existing code you wrote would be good to see.
– vshcherbinin
Nov 17 '18 at 12:02
@vshcherbinin, this is the tutorial i followed: mapbox.com/help/ios-dds-circle-layer
– otusweb
Nov 20 '18 at 8:16
add a comment |
I'm trying to create an application which will display children playground. I found that open street map actually has pretty good data for this.
So I used the http://overpass-turbo.eu to extract the data.
I then am using mapbox to display the data.
Unfortunately i'm a beginner with openstreetmap and associated SDKs.
The problem I'm running into is that some of those park are polygons. I just want to be able to display a marker on the map where the park is, not draw the shape of the park.
I followed this tutorial from mapbox to display circles on the data point, but it's drawing a circle on every coordinate in the polygons...
SO how can i either tell mapbox to add just an image in the center of the polygon? Do I have to modify the data I get from overpass? Can I query overpass differently to only get centroids?
Thanks for any pointers
EDIT
I was asked to add code. Really the code does not have much yet, so i don't think it has much value here as I'm asking for what is teh best approach to the problem. This is the delegate to add teh source that contains the data (in swift)
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let source = MGLVectorTileSource(identifier: "export-ddqmvm", configurationURL: URL(string: "mapbox://mobdesign.9zilzleo")!)
style.addSource(source)
let layer = MGLCircleStyleLayer(identifier: "landmarks", source: source)
layer.sourceLayerIdentifier = "export-ddqmvm"
layer.circleColor = NSExpression(forConstantValue: #colorLiteral(red: 0.67, green: 0.28, blue: 0.13, alpha: 1))
layer.circleOpacity = NSExpression(forConstantValue: 0.8)
style.addLayer(layer)
}
Also here is the tutorial I got this code from: https://www.mapbox.com/help/ios-dds-circle-layer/
ios mapbox openstreetmap overpass-api
I'm trying to create an application which will display children playground. I found that open street map actually has pretty good data for this.
So I used the http://overpass-turbo.eu to extract the data.
I then am using mapbox to display the data.
Unfortunately i'm a beginner with openstreetmap and associated SDKs.
The problem I'm running into is that some of those park are polygons. I just want to be able to display a marker on the map where the park is, not draw the shape of the park.
I followed this tutorial from mapbox to display circles on the data point, but it's drawing a circle on every coordinate in the polygons...
SO how can i either tell mapbox to add just an image in the center of the polygon? Do I have to modify the data I get from overpass? Can I query overpass differently to only get centroids?
Thanks for any pointers
EDIT
I was asked to add code. Really the code does not have much yet, so i don't think it has much value here as I'm asking for what is teh best approach to the problem. This is the delegate to add teh source that contains the data (in swift)
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let source = MGLVectorTileSource(identifier: "export-ddqmvm", configurationURL: URL(string: "mapbox://mobdesign.9zilzleo")!)
style.addSource(source)
let layer = MGLCircleStyleLayer(identifier: "landmarks", source: source)
layer.sourceLayerIdentifier = "export-ddqmvm"
layer.circleColor = NSExpression(forConstantValue: #colorLiteral(red: 0.67, green: 0.28, blue: 0.13, alpha: 1))
layer.circleOpacity = NSExpression(forConstantValue: 0.8)
style.addLayer(layer)
}
Also here is the tutorial I got this code from: https://www.mapbox.com/help/ios-dds-circle-layer/
ios mapbox openstreetmap overpass-api
ios mapbox openstreetmap overpass-api
edited Nov 20 '18 at 8:18
otusweb
asked Nov 16 '18 at 21:36
otuswebotusweb
4741615
4741615
1
Please provide a link to the tutorial you followed, also any existing code you wrote would be good to see.
– vshcherbinin
Nov 17 '18 at 12:02
@vshcherbinin, this is the tutorial i followed: mapbox.com/help/ios-dds-circle-layer
– otusweb
Nov 20 '18 at 8:16
add a comment |
1
Please provide a link to the tutorial you followed, also any existing code you wrote would be good to see.
– vshcherbinin
Nov 17 '18 at 12:02
@vshcherbinin, this is the tutorial i followed: mapbox.com/help/ios-dds-circle-layer
– otusweb
Nov 20 '18 at 8:16
1
1
Please provide a link to the tutorial you followed, also any existing code you wrote would be good to see.
– vshcherbinin
Nov 17 '18 at 12:02
Please provide a link to the tutorial you followed, also any existing code you wrote would be good to see.
– vshcherbinin
Nov 17 '18 at 12:02
@vshcherbinin, this is the tutorial i followed: mapbox.com/help/ios-dds-circle-layer
– otusweb
Nov 20 '18 at 8:16
@vshcherbinin, this is the tutorial i followed: mapbox.com/help/ios-dds-circle-layer
– otusweb
Nov 20 '18 at 8:16
add a comment |
1 Answer
1
active
oldest
votes
I finally figured out that if I use MGLSymbolStyleLayer
instead of MGLCircleStyleLayer
, then the symbol is added only once for shape. Achieving the effect i was looking for.
Here is the code matching the above code:
let markerLayer = MGLSymbolStyleLayer(identifier: "playgrounds", source: source)
markerLayer.sourceLayerIdentifier = "export-ddqmvm"
markerLayer.iconImageName = NSExpression(forConstantValue: "mapMarker")
markerLayer.iconAnchor = NSExpression(forConstantValue: "bottom")
markerLayer.iconAllowsOverlap = NSExpression(forConstantValue: "YES")
style.addLayer(markerLayer)
style.setImage(UIImage(named: "mapMarker")!, forName: "mapMarker")
I hope it helps someone else
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345744%2fdisplaying-marker-in-middle-of-openstreetmap-polygon-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I finally figured out that if I use MGLSymbolStyleLayer
instead of MGLCircleStyleLayer
, then the symbol is added only once for shape. Achieving the effect i was looking for.
Here is the code matching the above code:
let markerLayer = MGLSymbolStyleLayer(identifier: "playgrounds", source: source)
markerLayer.sourceLayerIdentifier = "export-ddqmvm"
markerLayer.iconImageName = NSExpression(forConstantValue: "mapMarker")
markerLayer.iconAnchor = NSExpression(forConstantValue: "bottom")
markerLayer.iconAllowsOverlap = NSExpression(forConstantValue: "YES")
style.addLayer(markerLayer)
style.setImage(UIImage(named: "mapMarker")!, forName: "mapMarker")
I hope it helps someone else
add a comment |
I finally figured out that if I use MGLSymbolStyleLayer
instead of MGLCircleStyleLayer
, then the symbol is added only once for shape. Achieving the effect i was looking for.
Here is the code matching the above code:
let markerLayer = MGLSymbolStyleLayer(identifier: "playgrounds", source: source)
markerLayer.sourceLayerIdentifier = "export-ddqmvm"
markerLayer.iconImageName = NSExpression(forConstantValue: "mapMarker")
markerLayer.iconAnchor = NSExpression(forConstantValue: "bottom")
markerLayer.iconAllowsOverlap = NSExpression(forConstantValue: "YES")
style.addLayer(markerLayer)
style.setImage(UIImage(named: "mapMarker")!, forName: "mapMarker")
I hope it helps someone else
add a comment |
I finally figured out that if I use MGLSymbolStyleLayer
instead of MGLCircleStyleLayer
, then the symbol is added only once for shape. Achieving the effect i was looking for.
Here is the code matching the above code:
let markerLayer = MGLSymbolStyleLayer(identifier: "playgrounds", source: source)
markerLayer.sourceLayerIdentifier = "export-ddqmvm"
markerLayer.iconImageName = NSExpression(forConstantValue: "mapMarker")
markerLayer.iconAnchor = NSExpression(forConstantValue: "bottom")
markerLayer.iconAllowsOverlap = NSExpression(forConstantValue: "YES")
style.addLayer(markerLayer)
style.setImage(UIImage(named: "mapMarker")!, forName: "mapMarker")
I hope it helps someone else
I finally figured out that if I use MGLSymbolStyleLayer
instead of MGLCircleStyleLayer
, then the symbol is added only once for shape. Achieving the effect i was looking for.
Here is the code matching the above code:
let markerLayer = MGLSymbolStyleLayer(identifier: "playgrounds", source: source)
markerLayer.sourceLayerIdentifier = "export-ddqmvm"
markerLayer.iconImageName = NSExpression(forConstantValue: "mapMarker")
markerLayer.iconAnchor = NSExpression(forConstantValue: "bottom")
markerLayer.iconAllowsOverlap = NSExpression(forConstantValue: "YES")
style.addLayer(markerLayer)
style.setImage(UIImage(named: "mapMarker")!, forName: "mapMarker")
I hope it helps someone else
answered Nov 22 '18 at 8:28
otuswebotusweb
4741615
4741615
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345744%2fdisplaying-marker-in-middle-of-openstreetmap-polygon-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Please provide a link to the tutorial you followed, also any existing code you wrote would be good to see.
– vshcherbinin
Nov 17 '18 at 12:02
@vshcherbinin, this is the tutorial i followed: mapbox.com/help/ios-dds-circle-layer
– otusweb
Nov 20 '18 at 8:16