This now does everything I want from it. Achievement unlocked.
This commit is contained in:
parent
392a225691
commit
f675cf6519
|
|
@ -64,6 +64,12 @@ samp {
|
|||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.geocsv {
|
||||
height: 600px;
|
||||
width: 80%;
|
||||
border: thin solid gray;
|
||||
}
|
||||
|
||||
.leaflet-popup-content h5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,14 +23,85 @@ crossorigin=""/ -->
|
|||
<div id="app">
|
||||
<p>
|
||||
</p>
|
||||
<h2>
|
||||
Map using data from element content
|
||||
</h2>
|
||||
<p>
|
||||
To make this work, you need a <samp><pre></samp> tag wrapping
|
||||
the data. View source of this page to see this work.</samp>
|
||||
</p>
|
||||
<div id="element-content-map"
|
||||
style="height: 600px; width: 80%; border: thin solid gray;">
|
||||
<pre>
|
||||
Country,Name,Latitude,Longitude,CountryCode,Continent
|
||||
Saint Martin,Marigot,18.0731,-63.082200,MF,North America
|
||||
American Samoa,Pago Pago,-14.266666666666667,-170.700000,AS,Australia
|
||||
Anguilla,The Valley,18.216666666666665,-63.050000,AI,North America
|
||||
Antigua and Barbuda,Saint John's,17.116666666666667,-61.850000,AG,North America
|
||||
Argentina,Buenos Aires,-34.583333333333336,-58.666667,AR,South America
|
||||
Aruba,Oranjestad,12.516666666666667,-70.033333,AW,North America
|
||||
Bahamas,Nassau,25.083333333333332,-77.350000,BS,North America
|
||||
Barbados,Bridgetown,13.1,-59.616667,BB,North America
|
||||
Belize,Belmopan,17.25,-88.766667,BZ,Central America
|
||||
Bermuda,Hamilton,32.28333333333333,-64.783333,BM,North America
|
||||
Bolivia,La Paz,-16.5,-68.150000,BO,South America
|
||||
Brazil,Brasilia,-15.783333333333333,-47.916667,BR,South America
|
||||
British Virgin Islands,Road Town,18.416666666666668,-64.616667,VG,North America
|
||||
Canada,Ottawa,45.416666666666664,-75.700000,CA,Central America
|
||||
Cayman Islands,George Town,19.3,-81.383333,KY,North America
|
||||
Chile,Santiago,-33.45,-70.666667,CL,South America
|
||||
Colombia,Bogota,4.6,-74.083333,CO,South America
|
||||
Costa Rica,San Jose,9.933333333333334,-84.083333,CR,Central America
|
||||
Cuba,Havana,23.116666666666667,-82.350000,CU,North America
|
||||
Curaçao,Willemstad,12.1,-68.916667,CW,North America
|
||||
Dominica,Roseau,15.3,-61.400000,DM,North America
|
||||
Dominican Republic,Santo Domingo,18.466666666666665,-69.900000,DO,North America
|
||||
Ecuador,Quito,-0.21666666666666667,-78.500000,EC,South America
|
||||
El Salvador,San Salvador,13.7,-89.200000,SV,Central America
|
||||
Falkland Islands,Stanley,-51.7,-57.850000,FK,South America
|
||||
Greenland,Nuuk,64.18333333333334,-51.750000,GL,Central America
|
||||
Grenada,Saint George's,12.05,-61.750000,GD,North America
|
||||
Guatemala,Guatemala City,14.616666666666667,-90.516667,GT,Central America
|
||||
Guyana,Georgetown,6.8,-58.150000,GY,South America
|
||||
Haiti,Port-au-Prince,18.533333333333335,-72.333333,HT,North America
|
||||
Honduras,Tegucigalpa,14.1,-87.216667,HN,Central America
|
||||
Jamaica,Kingston,18,-76.800000,JM,North America
|
||||
Mexico,Mexico City,19.433333333333334,-99.133333,MX,Central America
|
||||
Montserrat,Plymouth,16.7,-62.216667,MS,North America
|
||||
Nicaragua,Managua,12.133333333333333,-86.250000,NI,Central America
|
||||
Panama,Panama City,8.966666666666667,-79.533333,PA,Central America
|
||||
Paraguay,Asuncion,-25.266666666666666,-57.666667,PY,South America
|
||||
Peru,Lima,-12.05,-77.050000,PE,South America
|
||||
Puerto Rico,San Juan,18.466666666666665,-66.116667,PR,North America
|
||||
Saint Barthelemy,Gustavia,17.883333333333333,-62.850000,BL,North America
|
||||
Saint Kitts and Nevis,Basseterre,17.3,-62.716667,KN,North America
|
||||
Saint Lucia,Castries,14,-61.000000,LC,North America
|
||||
Saint Pierre and Miquelon,Saint-Pierre,46.766666666666666,-56.183333,PM,Central America
|
||||
Saint Vincent and the Grenadines,Kingstown,13.133333333333333,-61.216667,VC,Central America
|
||||
Sint Maarten,Philipsburg,18.016666666666666,-63.033333,SX,North America
|
||||
Suriname,Paramaribo,5.833333333333333,-55.166667,SR,South America
|
||||
Trinidad and Tobago,Port of Spain,10.65,-61.516667,TT,North America
|
||||
Turks and Caicos Islands,Grand Turk,21.466666,-71.133333,TC,North America
|
||||
United States,Washington D.C.,38.883333,-77.000000,US,Central America
|
||||
Uruguay,Montevideo,-34.85,-56.166667,UY,South America
|
||||
Venezuela,Caracas,10.483333333333333,-66.866667,VE,South America
|
||||
US Virgin Islands,Charlotte Amalie,18.35,-64.933333,VI,North America
|
||||
</pre>
|
||||
</div>
|
||||
<h2>
|
||||
Map using inline CSV
|
||||
</h2>
|
||||
<div id="inline-csv-map" style="height: 600px; width: 80%; border: thin solid gray;"></div>
|
||||
<div id="inline-csv-map"
|
||||
style="height: 600px; width: 80%; border: thin solid gray;"></div>
|
||||
<h2>
|
||||
Map using CSV from URL
|
||||
</h2>
|
||||
<div id="map" style="height: 600px; width: 80%; border: thin solid gray;"></div>
|
||||
<p>
|
||||
This is more limited than I would like, because of cross-site scripting
|
||||
blocks; the URL <b>must</b> be sourced from the same host as the page.
|
||||
</p>
|
||||
<div id="url-map"
|
||||
style="height: 600px; width: 80%; border: thin solid gray;"></div>
|
||||
<div id="doc">
|
||||
<p>
|
||||
Use this page as a crib for how to use <b>GeoCSV Lite</b> in your projects. In order
|
||||
|
|
@ -50,7 +121,7 @@ crossorigin=""/ -->
|
|||
type="text/javascript"></script></samp>
|
||||
</li>
|
||||
<li>One (or more) <code>div</code> elements to contain your maps. It
|
||||
is a requirement of Leaflet that these must have a fixed pixel width.
|
||||
is a requirement of Leaflet that these must have a fixed pixel height.
|
||||
Each must have a distinct <code>id</code>;</li>
|
||||
<li>
|
||||
For each <code>div</code> which you wish to contain a map view,
|
||||
|
|
@ -59,14 +130,25 @@ crossorigin=""/ -->
|
|||
<samp><script>geocsv_lite.core.initialise_map_element("map", "data/data.csv");</script></samp>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
The value passed as <var>data-source</var> may be CSV text, or it
|
||||
may be a URL from which CSV text can be sourced.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div id="credits">
|
||||
<div>
|
||||
<img height="16" width="16" alt="Clojure" src="img/credits/clojure-icon.gif"/> Powered by <a href="http://clojure.org">Clojure</a> ||
|
||||
<img height="16" width="16" alt="GitHub" src="img/credits/github-logo-transparent.png"/>Find me/fork me on <a href="https://github.com/simon-brooke/geocsv-lite">Github</a> ||
|
||||
<img height="16" width="16" alt="Free Software Foundation" src="{{servlet-context}}/img/credits/gnu.small.png"/>Licensed under the <a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License version 2.0</a>
|
||||
<img height="16" width="16" alt="Clojure"
|
||||
src="img/credits/clojure-icon.gif"/> Powered by
|
||||
<a href="http://clojure.org">Clojure</a> ||
|
||||
<img height="16" width="16" alt="GitHub"
|
||||
src="img/credits/github-logo-transparent.png"/>Find me/fork me on
|
||||
<a href="https://github.com/simon-brooke/geocsv-lite">Github</a> ||
|
||||
<img height="16" width="16"
|
||||
alt="Free Software Foundation"
|
||||
src="{{servlet-context}}/img/credits/gnu.small.png"/>Licensed under the
|
||||
<a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License version 2.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -80,31 +162,73 @@ crossorigin=""></script -->
|
|||
<script src="vendor/node_modules/papaparse/papaparse.min.js"></script>
|
||||
<script src="js/compiled/geocsv_lite.js" type="text/javascript"></script>
|
||||
<script>
|
||||
geocsv_lite.core.initialise_map_element("inline-csv-map", "Name,Latitude,Longitude\n"+
|
||||
"Nether Hazelfield Cottage,54.816274,-3.887435,\n"+
|
||||
"Over Hazelfield Cottage,54.823192,-3.899516,\n"+
|
||||
"Winter Palace,54.822260,-3.920147,\n"+
|
||||
"Craignair,54.842321,-3.872055,\n"+
|
||||
"Carlinscraig,54.843224,-3.8730822,\n"+
|
||||
"Orchardton,54.859129,-3.854212,\n"+
|
||||
"Elderslie,54.845596,-3.866432\n" +
|
||||
"Braendam Lodge,56.191257, -4.173869\n" +
|
||||
"Moncrief Terrace,55.938946, -3.183590\n" +
|
||||
"Craiglockhart Road, 55.916329, -3.243627\n" +
|
||||
"Merchiston Gardens,55.929761, -3.220899\n" +
|
||||
"Stamfordham, 55.042020, -1.877289\n" +
|
||||
"Kaymanton, 54.965216, -2.102066\n" +
|
||||
"Lonsdale College, 54.011382, -2.786183\n" +
|
||||
"Glasson Dock, 53.997440, -2.845856\n" +
|
||||
"Dolphinholme, 53.978104, -2.735363\n" +
|
||||
"Greenfield Street, 54.048707, -2.792666\n" +
|
||||
"Prospect Street,54.044364, -2.792685\n" +
|
||||
"Westminster Palace Gardens, 51.497045, -0.135231\n" +
|
||||
"Girdstingwood Cottage, 54.804639, -3.951338\n" +
|
||||
"Millburn Street, 54.837358, -4.046627\n" +
|
||||
"Palmer's Close, 54.834972, -4.053855"
|
||||
);
|
||||
geocsv_lite.core.initialise_map_element("map", "http://localhost:3449/data/data.csv");
|
||||
/* Map using data from element content */
|
||||
geocsv_lite.core.initialise_map_element("element-content-map",
|
||||
document.getElementById("element-content-map").innerText);
|
||||
/* Map using inline CSV passed to the function */
|
||||
geocsv_lite.core.initialise_map_element("inline-csv-map",
|
||||
"Country,Name,Latitude,Longitude,CountryCode,Continent\n" +
|
||||
"Somaliland,Hargeisa,9.55,44.050000,NULL,Africa\n" +
|
||||
"Western Sahara,El-Aaiún,27.153611,-13.203333,EH,Africa\n" +
|
||||
"Algeria,Algiers,36.75,3.050000,DZ,Africa\n" +
|
||||
"Angola,Luanda,-8.833333333333334,13.216667,AO,Africa\n" +
|
||||
"Benin,Porto-Novo,6.483333333333333,2.616667,BJ,Africa\n" +
|
||||
"Botswana,Gaborone,-24.633333333333333,25.900000,BW,Africa\n" +
|
||||
"Burkina Faso,Ouagadougou,12.366666666666667,-1.516667,BF,Africa\n" +
|
||||
"Burundi,Bujumbura,-3.3666666666666667,29.350000,BI,Africa\n" +
|
||||
"Cameroon,Yaounde,3.8666666666666667,11.516667,CM,Africa\n" +
|
||||
"Cape Verde,Praia,14.916666666666666,-23.516667,CV,Africa\n" +
|
||||
"Central African Republic,Bangui,4.366666666666666,18.583333,CF,Africa\n" +
|
||||
"Chad,N'Djamena,12.1,15.033333,TD,Africa\n" +
|
||||
"Comoros,Moroni,-11.7,43.233333,KM,Africa\n" +
|
||||
"Democratic Republic of the Congo,Kinshasa,-4.316666666666666,15.300000,CD,Africa\n" +
|
||||
"Republic of Congo,Brazzaville,-4.25,15.283333,CG,Africa\n" +
|
||||
"Cote d'Ivoire,Yamoussoukro,6.816666666666666,-5.266667,CI,Africa\n" +
|
||||
"Djibouti,Djibouti,11.583333333333334,43.150000,DJ,Africa\n" +
|
||||
"Egypt,Cairo,30.05,31.250000,EG,Africa\n" +
|
||||
"Equatorial Guinea,Malabo,3.75,8.783333,GQ,Africa\n" +
|
||||
"Eritrea,Asmara,15.333333333333334,38.933333,ER,Africa\n" +
|
||||
"Ethiopia,Addis Ababa,9.033333333333333,38.700000,ET,Africa\n" +
|
||||
"Gabon,Libreville,0.38333333333333336,9.450000,GA,Africa\n" +
|
||||
"The Gambia,Banjul,13.45,-16.566667,GM,Africa\n" +
|
||||
"Ghana,Accra,5.55,-0.216667,GH,Africa\n" +
|
||||
"Guinea,Conakry,9.5,-13.700000,GN,Africa\n" +
|
||||
"Guinea-Bissau,Bissau,11.85,-15.583333,GW,Africa\n" +
|
||||
"Kenya,Nairobi,-1.2833333333333332,36.816667,KE,Africa\n" +
|
||||
"Lesotho,Maseru,-29.316666666666666,27.483333,LS,Africa\n" +
|
||||
"Liberia,Monrovia,6.3,-10.800000,LR,Africa\n" +
|
||||
"Libya,Tripoli,32.88333333333333,13.166667,LY,Africa\n" +
|
||||
"Madagascar,Antananarivo,-18.916666666666668,47.516667,MG,Africa\n" +
|
||||
"Malawi,Lilongwe,-13.966666666666667,33.783333,MW,Africa\n" +
|
||||
"Mali,Bamako,12.65,-8.000000,ML,Africa\n" +
|
||||
"Mauritania,Nouakchott,18.066666666666666,-15.966667,MR,Africa\n" +
|
||||
"Mauritius,Port Louis,-20.15,57.483333,MU,Africa\n" +
|
||||
"Morocco,Rabat,34.016666666666666,-6.816667,MA,Africa\n" +
|
||||
"Mozambique,Maputo,-25.95,32.583333,MZ,Africa\n" +
|
||||
"Namibia,Windhoek,-22.566666666666666,17.083333,NA,Africa\n" +
|
||||
"Niger,Niamey,13.516666666666667,2.116667,NE,Africa\n" +
|
||||
"Nigeria,Abuja,9.083333333333334,7.533333,NG,Africa\n" +
|
||||
"Rwanda,Kigali,-1.95,30.050000,RW,Africa\n" +
|
||||
"Saint Helena,Jamestown,-15.933333333333334,-5.716667,SH,Africa\n" +
|
||||
"Sao Tome and Principe,Sao Tome,0.3333333333333333,6.733333,ST,Africa\n" +
|
||||
"Senegal,Dakar,14.733333333333333,-17.633333,SN,Africa\n" +
|
||||
"Seychelles,Victoria,-4.616666666666667,55.450000,SC,Africa\n" +
|
||||
"Sierra Leone,Freetown,8.483333333333333,-13.233333,SL,Africa\n" +
|
||||
"Somalia,Mogadishu,2.066666666666667,45.333333,SO,Africa\n" +
|
||||
"South Africa,Pretoria,-25.7,28.216667,ZA,Africa\n" +
|
||||
"South Sudan,Juba,4.85,31.616667,SS,Africa\n" +
|
||||
"Sudan,Khartoum,15.6,32.533333,SD,Africa\n" +
|
||||
"Swaziland,Mbabane,-26.316666666666666,31.133333,SZ,Africa\n" +
|
||||
"Tanzania,Dar es Salaam,-6.8,39.283333,TZ,Africa\n" +
|
||||
"Togo,Lome,6.116666666666666,1.216667,TG,Africa\n" +
|
||||
"Tunisia,Tunis,36.8,10.183333,TN,Africa\n" +
|
||||
"Uganda,Kampala,0.31666666666666665,32.550000,UG,Africa\n" +
|
||||
"Zambia,Lusaka,-15.416666666666666,28.283333,ZM,Africa\n" +
|
||||
"Zimbabwe,Harare,-17.816666666666666,31.033333,ZW,Africa\n" +
|
||||
"British Indian Ocean Territory,Diego Garcia,-7.3,72.400000,IO,Africa\n" );
|
||||
/* Map using CSV from URL */
|
||||
geocsv_lite.core.initialise_map_element("url-map",
|
||||
"http://localhost:3449/data/europe-capitals.csv");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,36 @@
|
|||
[clojure.browser.dom :as dom]
|
||||
[clojure.string :as cs]
|
||||
[geocsv-lite.data :refer [get-csv-url get-data get-query-part-as-map]]
|
||||
[geocsv-lite.gis :as gis]
|
||||
[geocsv-lite.map :as m]
|
||||
[geocsv-lite.notify :as n]))
|
||||
|
||||
|
||||
(defn ^:export initialise-map-element
|
||||
"Create a map view in the element with this `id` and decorate it with
|
||||
pins showing locations from this `data-source`."
|
||||
pins showing locations from this `data-source`. If `data-source` is nil
|
||||
or an empty string, the content of the element will be used, if present."
|
||||
[id data-source]
|
||||
(n/message (str "geocsv-lite.core.initialise-map-element called with args id: " id "; data-source: " data-source "."))
|
||||
(n/message
|
||||
(str
|
||||
"geocsv-lite.core.initialise-map-element called with args id: "
|
||||
id "; data-source: " data-source "."))
|
||||
(let [sid (str id)
|
||||
kid (keyword sid)
|
||||
v (m/add-view sid 55 -4 10)]
|
||||
(.whenReady v (fn [] (get-data kid data-source)))))
|
||||
|
||||
(defonce app-state (atom {:text "Hello world!"}))
|
||||
(defn ^:export initialise-map-element-from-content
|
||||
[id]
|
||||
(let [sid (str id)
|
||||
kid (keyword sid)
|
||||
v (m/add-view sid 55 -4 10)]
|
||||
(.whenReady
|
||||
v
|
||||
(fn
|
||||
[]
|
||||
(get-data kid (.innerText (.getElementById js/document id)))))))
|
||||
|
||||
|
||||
|
||||
(defn on-js-reload []
|
||||
;; optionally touch your app-state to force rerendering depending on
|
||||
|
|
|
|||
|
|
@ -49,7 +49,8 @@
|
|||
(when (string? %)
|
||||
(cs/lower-case
|
||||
(cs/replace
|
||||
% #"[^\w\d]+" "-"))))]
|
||||
(cs/trim %)
|
||||
#"[^\w\d]+" "-"))))]
|
||||
(keyword
|
||||
(if (empty? n)
|
||||
(gensym)
|
||||
|
|
@ -90,6 +91,7 @@
|
|||
"Get data for the view identified by this keyword `k` from this `data-source`.
|
||||
The data source may be a URL, or a CSV or JSON formatted string."
|
||||
[k data-source]
|
||||
(js/console.debug (str "get-data: k = `" k "`; data-source = `" data-source "`"))
|
||||
(let [p (js->clj (.parse js/Papa data-source) :keywordize-keys true)
|
||||
data (if
|
||||
(empty? (:errors p))
|
||||
|
|
|
|||
Loading…
Reference in a new issue