1

I hope you guys could help me. It has been several days since it tried and failed on populating my markers using a JSON method.

Please point out where I'm making a mistake. Below is my code:

<html lang="en">
<head>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
    .map {
        height: 100%;
        width: 100%;
    }
</style>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<style>
    .map:-moz-full-screen {
        height: 100%;
    }
    .map:-webkit-full-screen {
        height: 100%;
    }
    .map:-ms-fullscreen {
        height: 100%;
    }
    .map:full-screen {
        height: 100%;
    }
    .ol-rotate {
        top: 3em;
    }
    .ol-popup {
        display: none;
        position: absolute;
        background-color: white;
        -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
    }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }
        .ol-popup-closer:after {
            content: "✖";
        }
</style>
<title>OpenLayers 3 example</title>
</head>
<body>
@*<div class="row-fluid">
    <div class="span12">
        <div id="map" class="map"></div>*@
@*</div>
    </div>*@
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <select id="layer-select" name="layer-select">
                <option value="Aerial">Aerial</option>
                <option value="AerialWithLabels">Aerial with labels</option>
                <option value="Road" selected>Road</option>
            </select>
            <div id="map" class="map"></div>
            <div id="no-download" class="alert alert-error" style="display: none">
                This example requires a browser that supports the
                <a href="http://caniuse.com/#feat=download">link download</a> attribute.
            </div>
            <a id="export-png" class="btn btn-info" download="map.png"><i class="icon-download"></i> Export PNG</a>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map">
                    <div id="popup" class="ol-popup">
                        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                        <div id="popup-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript"
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
Add a click handler to hide the popup.
**/
closer.onclick = function () {
        container.style.display = 'none';
        closer.blur();
        return false;
    };
    /**
     * Create an overlay to anchor the popup to the map.
   */
    var overlay = new ol.Overlay({
        element: container
    });
    var count = 10;
    var features = []; //new Array(count);
    var e = 4500000;
    $('#filter').ready(function () {
        var FiltAddress = $('#FiltAddress').val();
        var FiltProject = $('#FiltProject').val();
        var FiltRegion = $('#FiltRegion').val();
        var FiltProvince = $('#FiltProvince').val();
        var FiltMunicipality = $('#FiltMunicipality').val();
        var FiltBarangay = $('#FiltBarangay').val();
        var FiltName = $('#FiltName').val();
        var url = "/Projects/GetZamboMarkers?FiltAddress=" + FiltAddress +
              "&FiltProject=" + FiltProject;
        var y = -1;
        $.getJSON(url, function (json1) {
            $.each(json1, function (key, data) {                  
                var coordinates = ol.proj.transform([data.Longitude, data.Latitude], 'EPSG:4326', 'EPSG:3857');
                features[key] = new ol.Feature(new ol.geom.Point(coordinates));
                alert(features);
            });
        })
        var source = new ol.source.Vector({
            features: features
        });
        var clusterSource = new ol.source.Cluster({
            distance: 40,
            source: source
        });
        var styleCache = {};
        var clusters = new ol.layer.Vector({
            source: clusterSource,
            style: function (feature, resolution) {
                var size = feature.get('features').length;
                var style = styleCache[size];
                if (!style) {
                    style = [new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 10,
                            stroke: new ol.style.Stroke({
                                color: '#fff'
                            }),
                            fill: new ol.style.Fill({
                                color: '#3399CC'
                            })
                        }),
                        text: new ol.style.Text({
                            text: size.toString(),
                            fill: new ol.style.Fill({
                                color: '#fff'
                            })
                        })
                    })];
                    styleCache[size] = style;
                }
                return style;
            }
        });
        var raster = new ol.layer.Tile({
            source: new ol.source.MapQuest({ layer: 'osm' })
        });
        var raw = new ol.layer.Vector({
            source: source
        });
        var map = new ol.Map({
            layers: [raster, clusters],
            overlays: [overlay],
            //    renderer: exampleNS.getRendererFromQueryString(),
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            }),
            controls: ol.control.defaults().extend([
             new ol.control.FullScreen(),

            ]),
        });
        /**
         * Add a click handler to the map to render the popup.
         */
        map.on('click', function (evt) {
            var coordinate = evt.coordinate;
            var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));
            overlay.setPosition(coordinate);
            content.innerHTML = '<p>You clicked here:</p><code>' + coordinate +
                '</code>';
            container.style.display = 'block';
        });
        var exportPNGElement = document.getElementById('export-png');
        if ('download' in exportPNGElement) {
            exportPNGElement.addEventListener('click', function (e) {
                map.once('postcompose', function (event) {
                    var canvas = event.context.canvas;
                    exportPNGElement.href = canvas.toDataURL('image/png');
                });
                map.renderSync();
            }, false);
        } else {
            var info = document.getElementById('no-download');
            /**
            * display error message
            */
            info.style.display = '';
        }
    }) //javascript load
</script>
</body>
</html>
  • Can you please add the JSON response from call to /Projects/GetZamboMarkers ? – Henry Aloni Dec 29 '14 at 13:57
  • Heres a sample response: [{"BasicPackageId":1,"MetaPackageId":1,"Latitude":11.368,"Longitude":120.222,"Altitude":1,"GpsDateTimeStamp":"\/Date(1419834156000)\/","GetDateTaken":"\/Date(1419834164000)\/","Type":"1","FileName":"1","region_code":"11","prov_code":"1","city_code":"1","brgy_code":"1","sitio":"11","MetaCategoryId":1,"Cost":11,"Status":1,"Description":"eiffel","PicassaCollection":"1","PicassaSingle":"11","DerMandarValue":"1","DerManDarFunction":"1","DerManDarScript":"1","GeoEncode":"1"}] – Jessy Balanag Jan 4 '15 at 5:14
1

I have already resolved this.

heres my answer:

HTML:

OpenLayers 3 - LayerSwitcher

<style>
    html, body {
        height: 100%;
        padding: 0;
        margin: 0;
        font-family: sans-serif;
        font-size: small;
    }

    #map {
        width: 100%;
        height: 100%;
    }

    .popup {
        background: white;
        width: 250px;
        height: 200px;
        border-radius: 5px;
    }

    .closebtn {
        position: absolute;
        right: 4px;
    }

    #text {
        position: absolute;
        bottom: 1em;
        left: 1em;
        width: 300px;
        z-index: 20000;
        border: solid 1px #999;
        background-color: rgba(227,233,238,.6);
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -moz-border-radius-topright: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        text-align: center;
        height: auto;
        margin: 0;
    }

    .olControlAttribution {
        background-color: rgba(227,233,238,.6);
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -moz-border-radius-topright: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        text-align: center;
    }
</style>

Draw Points Draw Lines Draw Polygon

<script src="~/Scripts/bower_components/openlayers3/build/ol.js"></script>
<script src="~/Scripts/ol_custom_src/ol3-layerswitcher.js"></script>
<script src="~/Scripts/ol_custom/layerswitcher.js"></script>

@{ Layout = "~/Views/Shared/public/_layout.cshtml";}

JAVASCRIPT (layerswitcher.js)

var count = 10; var features = [];// new Array(count); var query = []; var e = 4500000;

var map = null;

(function () {

map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Group({
            'title': 'Base maps',
            layers: [
                new ol.layer.Tile({
                    title: 'Stamen Toner',
                    type: 'base',
                    visible: false,
                    source: new ol.source.Stamen({
                        layer: 'toner'
                    })
                }),

                new ol.layer.Tile({
                    title: 'OSM',
                    type: 'base',
                    visible: true,
                    source: new ol.source.OSM()
                }),
                new ol.layer.Tile({
                    title: 'Satellite',
                    type: 'base',
                    visible: false,
                    source: new ol.source.MapQuest({ layer: 'sat' })
                }),


                  new ol.layer.Tile({
                      title: 'Google Map',
                      type: 'base',
                      visible: false,
                      source: new ol.source.MapQuest({ layer: 'sat' })
                  })


            ]
        }),
        new ol.layer.Group({
            title: 'Overlays',
            layers: [
                new ol.layer.Tile({
                    title: 'Countries',
                    source: new ol.source.TileWMS({
                        url: 'http://demo.opengeo.org/geoserver/wms',
                        params: { 'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp' },
                        serverType: 'geoserver'
                    })
                }),

                 new ol.layer.Tile({
                     title: 'Philippines',
                     source: new ol.source.TileWMS({
                         url: 'http://demo.opengeo.org/geoserver/wms',
                         params: { 'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp' },
                         serverType: 'geoserver'
                     })
                 }),



                 new ol.layer.Tile({
                     title: 'Streams',
                     source: new ol.source.TileWMS({
                         preload: Infinity,
                         url: 'http://felek.cns.umass.edu:8080/geoserver/wms',
                         serverType: 'geoserver',
                         params: {
                             'LAYERS': "Streams:Developed",
                             'TILED': true
                         }
                     })
                 }),



            ]
        })
    ],
    view: new ol.View({
        center: ol.proj.transform([120, 12.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

$("#filter").click(function () {

    var FiltAddress = $('#FiltAddress').val();

    var FiltProject = $('#FiltProject').val();

    var FiltRegion = $('#FiltRegion').val();

    var FiltProvince = $('#FiltProvince').val();

    var FiltMunicipality = $('#FiltMunicipality').val();

    var FiltBarangay = $('#FiltBarangay').val();

    var FiltName = $('#FiltName').val();

    var url = "/Projects/GetZamboMarkers?FiltAddress=" + FiltAddress +
          "&FiltProject=" + FiltProject;



    $.getJSON(url, function (json1) {

        $.each(json1, function (key, data) {

            features[key] = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([data.Longitude, data.Latitude], 'EPSG:4326',
                'EPSG:3857')),
                name: [data.Description],
                population: 4000,
                rainfall: 500,

            });

        });



        var source = new ol.source.Vector({
            features: features
        });

        var clusterSource = new ol.source.Cluster({
            distance: 40,
            source: source
        });

        var styleCache = {};

        var clusters = new ol.layer.Vector({
            source: clusterSource,
            style: function (feature, resolution) {
                var size = feature.get('features').length;
                var style = styleCache[size];
                if (!style) {
                    style = [new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 10,
                            stroke: new ol.style.Stroke({
                                color: '#fff'
                            }),
                            fill: new ol.style.Fill({
                                color: '#3399CC'
                            })
                        }),
                        text: new ol.style.Text({
                            text: size.toString(),
                            fill: new ol.style.Fill({
                                color: '#fff'
                            })
                        })
                    })];
                    styleCache[size] = style;
                }
                return style;
            }
        });

        map.addLayer(clusters);
    })

})


var layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'DSWD Layer Switcher' // Optional label for button
});

map.addControl(layerSwitcher);

})();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.