Displaying marker in middle of openstreetmap polygon (iOS)












0















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/










share|improve this question




















  • 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
















0















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/










share|improve this question




















  • 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














0












0








0








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/










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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














  • 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












1 Answer
1






active

oldest

votes


















1














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






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    1














    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






    share|improve this answer




























      1














      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






      share|improve this answer


























        1












        1








        1







        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






        share|improve this answer













        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 22 '18 at 8:28









        otuswebotusweb

        4741615




        4741615






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            這個網誌中的熱門文章

            Tangent Lines Diagram Along Smooth Curve

            Yusuf al-Mu'taman ibn Hud

            Zucchini