Coder Social home page Coder Social logo

iag-geo / bootleaf Goto Github PK

View Code? Open in Web Editor NEW
87.0 17.0 66.0 489 KB

An open-source version of IAG's Bootleaf fork

Home Page: https://demo.bootleaf.xyz

License: MIT License

JavaScript 83.86% HTML 5.07% CSS 10.75% Python 0.31%
bootstrap leaflet gis mapping arcgis-server geoserver

bootleaf's People

Contributors

ahmednoureldeen avatar minus34 avatar rnuske avatar slead avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootleaf's Issues

Show a Map Scale bar

I can't find an option to show a scale bar on the map. Is is not available or is the setting hiding from me?

Recreation of the layers without page refresh

Good afternoon,

I have stumbled across an issue during the development of mine. I am calling a GeoJSON layer using the URL from my server, and I would like that it gets dynamically re-created every few seconds on the map. This layer represents a route, kind of like a GPS. Is there a function already implemented that allows me to do that, or I will need to make some additions to the app.js?

Thank you in advance

GeoJSON Layer is Disabled After Zoom

First, thank you for your work to update BootLeaf. I have used Bryan's initial BootLeaf code in the past for a project and I really like the enhancements that you have made to the project.

Second, in the demo, if I have the GeoJSON layers enabled, once I zoom in, they are disabled and the markers are cleared. Checking the GeoJSON box again does not restore the layer. My primary use will be to display data stored in GeoJSON so this feature is critical.

Thanks,
Michael

Replace HTML generation in app.js with templates

There are numerous examples where the DOM is built using hard-coded HTML in the JavaScript, eg:

var html = '<li>';
html += '<a href="#" data-toggle="collapse" data-target=".navbase-collapse.in" class="dropdown-item liBasemap" data-type="' + basemap.type + '" data-theme="'
          + basemap.theme + '"' +  'data-basemapId="' + basemap.id + '"';

Replace this with a more robust templating approach such as Handlebars.js

View image on pupup from geoJSON

Hello
I have a Geo JSON that contains the path in the project of some images. How do I make the image appear in the brand's popup.
mapa

WFS layer URLs from local Geoserver

What is the proper way to load a WFS layer from Geoserver? I don't know if I'm inputting the urls incorrectly or if something else is wrong. I'm running Geoserver locally.

This is a great project! Thank you and keep it up!

add new tools

I'm trying to add a print/saveimage button to my application but I can't find how to do it.
I have done it with other maps but I can't find where to add without moving everything in bootleaf.
Is there any guide or something I could follow?
Thank you very much!

Where to add a Google API key for geocoder?

Hi, have used Bootleaf for years and this is a really great step forward on something that was already good!

Hopefully a simple request, but I can't seem to find an answer for myself! Google's Geocoder now needs an API key so I was wondering where I need to add this? I suspect I could hard code it into Control.Geocoder.js but I don't really want to do this!

I did try

	"leafletGeocoder": {
		//https://github.com/perliedman/leaflet-control-geocoder
		"key": "AIza..........................................UGiCk",
		"collapsed": false,
		"position": "bottomleft",
		"placeholder": "Search for a location",
		"type": "Google", // OpenStreetMap, Google, ArcGIS
		//"suffix": "Australia" // optional keyword to append to every search
	},

but that doesn't seem to pass the key in the request.

Thanks

Fix the broken WFS demo layer, improve GeoServer WFS documentation

The demo WFS layer 'world countries' is failing:

{
  "id": "countries",
  "name": "World countries (WFS)",
  "type": "WFS",
  "url": "https://demo.boundlessgeo.com/geoserver/opengeo/wfs",
  "typeName": "opengeo:countries",

as this layer is no longer available. Replace this with a working example, and improve the documentation on how to connect to a GeoServer WFS / GeoJSON layer.

Styles from Geoserver

In geoserver you can customize the styles of the points or lines.
How can I bring those styles from the geoserver server together with the wfs request?

How to display Layer Legend?

It is more a question than an issue. I can see in the app.js you have taken a legend of a layer into account. I wonder if it is possible to make it show a legend? I tried with the WFS and GeoJSON Layers but without any success. I would appreciate it.

MySQL

Hye,

I used the old bootleaf and i discovered yours. Great Job !!!
So, i try to migrate to bootleag-iag but i have a request. I used MySQL server side for display markers for the server side and i load it every event moveend and zoom parameters.

The MySQL Server side send geojson format and bootloeaf display it on the map.

I don't have the possibility to have a GeoServer Server, so i made the job by mysql and php.

Is it possible to specify an url (Ajax) to call with parameters in the custom.js ? ...

Thanks

json not loading on trunk clone

git clone https://github.com/iag-geo/bootleaf

and then opening index.html in a web browser complains about the theatres and the museums.

I suspect some online library has changed but don't know enough to troubleshoot. Earlier Bootleaf versions (admittedly the trunk doesn't change much) are also not behaving.

Problem with identify geoserver wms and query

Hello, first I would like to congratulate for this project.
I am preparing a map in which I load several wms services generated with geoserver and that now I would be able to ask for information and make queries about them.
However, in both cases I am having problems and I do not know how to solve them.
imagen
imagen

On the other hand, how can the repetition of the labeling be solved. I have been testing with the meta tile option but without success.

Thanks in advance

Handling of application/json WFS

Thanks for making such a useful application available.

As best I can tell the NSW Geoscience WFS below requires one to connect with application/json.

"type": "WFS",
"url": "https://gs.geoscience.nsw.gov.au/geoserver/wfs",
"typeName": "gsnsw:gp_aem",
"outputFormat": "application/json",
"geomField": "geom"

It looks like Geoserver returns a sensible result from the prepared Request URL. This was not the case with the default "text/javascript".

The Firefox debugger then complains about SyntaxError: unexpected token: ':'. I wonder if there is some special handling needed?

Many thanks.

Cannot find URL to query

I am trying to query wms data but I recieved an error saying URL cannot be found. What can I do to fix this? Thank you

Enable Cors Xampp

How to enable xampp header?
I can't read the attributes of an external wms layer

Query within polygon not working

Hi, when query a wms layer get the results but I can´t zoom in to the selected record. However, when I use the tool to identify if I can select the result and zoom in on it.
Identify
image
Query
image

I don´t know what is the problem.

Regards

problem with highlight wmsTiledLayer (line type only)

hello,

i have try bootleaf for a week and it's look fantastic.
one features that i like is highlight objects.
I used geoserver and store data using shapefile directory with WMS and WFS service enable.
I can use identify and query features too.
I can highlight wmsTiledLayer with this code:

"highlightStyle": {
		"weight": 2,
		"opacity": 1,
		"color": 'white',
		"dashArray": '3',
		"fillOpacity": 0.5,
		"fillColor": '#fff32c',
		"stroke": true,
	}

but i dont know why it's only work on point and polygon type of shapefiles and not on line type of shapefiles??.

here is my point and line type on layer config:

{
	        "id": "bridge_geo",
			"name": "Bridge",
			"url": "/proxied_geoserver/geoserver/shapefiles_dir/wms",
			"type": "wmsTiledLayer",
			"layers": "bridge_geo",
			"EPSG": 4326,
			"format": "image/png",
			"transparent": true,
			"useCors": true,
			"geomField": "the_geom",
			//"showHighlight": true,
			"maxZoom": 22,
            "showOnTop": true,
            "queryWidget": {
				"queries" : [
			{"name": "bridge_id", "alias": "Bridge Id", "type": "numeric", "defaultOperator": "="}
				]
			},
			"identify": {
				"layerName": "bridge_geo",
				"layerLabel": "Bridge",
				"primaryField": "bridge_id",
				//"buffer": 10,
				"outFields": [
				{"name": "Id", "hidden": true},
    				{"name": "bridge_id", "alias": "Bridge Id"},
    				{"name": "POINT_X", "alias": "Longitude"},
    				{"name": "POINT_Y", "alias": "Latitude"}
				],
	            "maxAllowableOffset": 0.01
			},
			"outFields": [
    				{"name": "Id", "hidden": true},
    				{"name": "bridge_id", "alias": "Bridge Id"},
    		],
            "visible": false,
    },

{
		"id": "roads_new_geo",
		"name": "Roads",
		"url": "/proxied_geoserver/geoserver/shapefiles_dir/wms",
		"type": "wmsTiledLayer",
		"layers": "roads_new_geo",
		"EPSG": 4326,
		"format": "image/png",
		"transparent": true,
		"useCors": true,
		"geomField": "the_geom",
		//"showHighlight": true,
		"maxZoom": 22,
		//"style": {
		//		"stroke": true,
		//		//"fillColor": "#e31a1c",
		//		//"fillOpacity": 0.5,
		//		"radius": 10,
		//		"weight": 2,
		//		"opacity": 1,
		//		"color": '#e31a1c',
		"queryWidget": {
			"queries" : [
				{"name": "name", "alias": "Road Name", "defaultOperator": "contains"},
			]
		},
		"identify": {
			"layerName": "roads_new_geo",
			"layerLabel": "Roads",
			"primaryField": "name",
			"outFields": [
				{"name": "name", "alias": "Road Name"},
				{"name": "status", "alias": "Road Stat"},
			],
			"maxAllowableOffset": 0.01
		},
		"outFields": [
				{"name": "name", "alias": "Road Name"},
				{"name": "status", "alias": "Road Stat"},
			],
		"visible": false,
}

enable showHighlight to true not given any different.

any help or suggestion please?.

Function Undefined

Hi!
I have added a latlong graticulate to my map and would like to have the ability to turn it on/off.
I think it is a very simple but can't find what I'm doing wrong.
I have added the graticulate in the custom file and then created a function to remove it.

' var graticulate = L.latlngGraticule({
showLabel: true,
fontcolor:"#FFFFFF",
color: "#222",
zoomInterval: [
{start: 2, end: 3, interval: 30},
{start: 4, end: 4, interval: 10},
{start: 5, end: 7, interval: 5},
{start: 8, end: 10, interval: 1}

    ] }).addTo(bootleaf.map);      

function latlon(){
bootleaf.map.removeLayer(graticulate);
}
'

Then I added a checkbox in the Tools list with the event onchange calling the function latlon().
<input type="checkbox" name="graticulate" value="1" onchange="latlon()"></li>
I'm always receiving the message that the function is not defined but I don't know where or how I should call the function.

Thank you very much!

Mention esri-leaflet Terms in README

ESRI seems to have firm ideas under which Terms one can use esri-leaflet. For example, one needs to buy one of their products if using esri-leaflet for government or business purposes. At least that's what I understood, I might be wrong.

If these terms apply to bootleaf (which I guess is the case), it might be good to inform users about it upfront in the README.md.

Problem displaying basemap with MiniMap plugin

Good afternoon,

Thank you for the nice work!
I am having a problem adding the MiniMap plugin control (https://github.com/Norkart/Leaflet-MiniMap). I followed the pattern in the code, and I have been able to add the MiniMap but I cannot see the basemap from the MiniMap. I get the following error: "There was a problem running the BeforeMapLoads custom code: Cannot read property 'on' of undefined". I added the control in the setBasemap Function:

function setBasemap(basemap){
    ......
    bootleaf.MiniMapControl = new L.Control.MiniMap(bootleaf.basemapLayer).addTo(bootleaf.map);
}

Any help on how can I do it? Thank you in advance.

Is there any guide or something I could follow?

image

attribution for displayed basemaps

some basemaps, such as OSM for example, demand a certain attribution to be shown on the map. At least in the example application i couldn't see any attributions. Is there a way to configure them?

add new basemaps

Is it possible to add new wms basemaps?
I tried it adding this to basemaps in app.js:
{"id": "GEBCO", "type": "tiled", "label": "GEBCO", "url": "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?"}

And this to the set basemap function

} else if (basemap.type === 'tiled'){
if (basemap.id === 'GEBCO') {
options.attribution = "GEBCO";

But still can't visualize the layer although it appars in the basemaps list. Do you know what I'm doing wrong?

Thanks!

Error message when geoJson layers are not at the top of layers list

Hello,

I'd like to thank IAG for providing boot-leaf open source and Stephan Lead for the work he’s done putting the framework and documentation together. I'm a novice web developer experimenting with your source code though django web framework.

I've found what seems to be an issue in the way boot-leaf manages layers. If I move the example geojson layers to a different position in the layers list I get the following error when the map loads. This error seems to appear if any of the geojson are not at the top of the list. The functionality of the Map appears to be unaffected (all layers load, just the error message appears).

untitled

Aside from from the config file, below is list of modifications I've made to the bootleaf source:

Installation

Package was split into the following to match Django filing structure:

  • Project specific static files moved to Project-->static
  • Project specific index file was moved into temlates-->Project
  • The remaining folder structure was moved to static

The index file supplied with the original package was modified to include django
tagging of its static links and were routed to the correct directory based on the
package split discussed above.

Customizations

  • added resize #sidebar in bootleaf-->style.css
  • changed .panel-heading, .panel-body & .feature-row width to 100%
    in bootleaf-->style.css

Fixes

  • changed typo in config file for esri basemap layer topographic

Using Bing tiles?

Hi, can I ask how you configure the Bing tiles? I can see where to add the API key, and the docs here have the names of three layer types, but /src/js/app.js doesn't appear to have them defined.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.