How to call Geojson data (features) in another html page?

111 views
Skip to first unread message

Mitchel Blais

unread,
Aug 29, 2014, 4:20:14 PM8/29/14
to leafl...@googlegroups.com
I am wondering how i get geojson data from my 'main.html' page to 'report.html'? All the javascript to run the map is located in the 'main.js' file. How do I call the 'searchCoord' geojson data from my 'report.html' page, the main.js file is linked to the report.html file...(
<script type="text/javascript" src="../js/main.js"></script>

In my 'main.js' file I have:


var searchData = '';


function searchByAjax(text, callResponse)//callback for 3rd party ajax requests
{
$.ajax({
url: searchUrl + text + searchUrlEnd,
type: 'GET',
dataType: 'json',
success: function(searchData){
searchCoord.addData(searchData);
lat = searchData.features[0].properties.lat;
lon = searchData.features[0].properties.lon;
map.setView(new L.LatLng(lat, lon), 12);
}
});
};

var searchCoord = new L.GeoJSON(searchData, {
onEachFeature: function (feature, layer) {
     var popupContent = "";
     if (feature.properties && feature.properties.uwi) {
      popupContent = "<strong>UWI:</strong>" + " " + feature.properties.uwi + "<br/>" + "<strong>OPERATOR:</strong>" + " " + feature.properties.oper_abbre + "<br/>" + "<br/>";
     }
     layer.bindPopup(popupContent + '<a href="report/report.html" target="_blank"><i class="fa fa-info-circle fa-2x"></i></a>');
     }
}).addTo(map);

map.addControl( new L.Control.Search({callData: searchByAjax, text:'UWI...', markerLocation: true}) );



In my 'report.html' page:

<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Well Report</title>
<script src="../js/vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<link rel="stylesheet" href="report.css">
</header>

<body>

<!--How to get 'SearchCoord' Geojson data into this HTML page?-->

</body>

</html>




Graham Jessiman

unread,
Aug 29, 2014, 4:30:29 PM8/29/14
to leafl...@googlegroups.com
Not sure from your description how your main.html and report.html pages are related but if main gets the coords(s) for the report, can you pass in the URL header as you call the report?

Mitchel Blais

unread,
Aug 29, 2014, 5:41:23 PM8/29/14
to leafl...@googlegroups.com
The main.html and report.html are related because a leaflet popup happens when I click a marker, I then select the 'i' info image and that triggers to open up the report.html file. When the report.html file opens I want to display the markers geojson data in another window. In the image you see the main.html file, the 'i' opens the report.html. Here is the main.html code:


Ente<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Leaflet GIS App</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="js/vendor/leaflet/leaflet-google.js"></script>
<script src="js/vendor/jquery-2.1.1.min.js"></script>
<script src="js/vendor/leaflet/src/l.control.geosearch.js"></script>
<script src="js/vendor/leaflet/src/l.geosearch.provider.esri.js"></script>
<link rel="stylesheet" href="css/l.geosearch.css" />
<link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet-search.min.css" />

    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id="map">
       
        </div>
        <script src="js/vendor/leaflet/dist/leaflet-search.src.js"></script>
        <script src="js/vendor/leaflet/dist/leaflet-search.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
       
        
        
        

        
        
    </body>
</html>
r code here...


Capture.PNG

Mitchel Blais

unread,
Aug 29, 2014, 5:55:40 PM8/29/14
to leafl...@googlegroups.com
And here is whats happening when the report opens....L is not defined? Why does it need to be defined in my report.html page? there isn't a leaflet map, I only want the geojson data in the form of a report. See attached image.
Capture.PNG

k_man_au

unread,
Aug 29, 2014, 10:49:56 PM8/29/14
to leafl...@googlegroups.com
I would say best practice would be to insert a unique identifier to each row of the original data. When you create the popups, link to the report passing the identifier like so:-

"<a href=\"report/report.html?ID=\"" + feature.properties.uniqueid + " target=\"_blank\">"

Then query the datasource again from report.html extracting only the data for that record (using the GET variable as the query). 

Mitchel Blais

unread,
Aug 30, 2014, 12:40:32 PM8/30/14
to leafl...@googlegroups.com
Sorry I am pretty new at all this, could you give me an example on how to query the datasource again from the report.html only extracting the data for the record selected?

Thanks
Reply all
Reply to author
Forward
0 new messages