is there any way to use multiple sprite urls with mapbox gl js in combination with maputnik? Right now we are using just our own dataset but will add more external sources in the future. Problem right here is, we can't add all the possible sprites to our own file. Non-existing sprites are just cycles. Users should be given the possibility to load additional sprite files via url to the project, so they can see the full potential of the data.
Thanks in advance.
You can't. See https://github.com/mapbox/mapbox-gl-js/issues/4086 and https://github.com/mapbox/mapbox-gl-js/issues/358
If you have some other way for users to specify images, you can call map.addImage() to add each one separately at map load time.
Related
I am having some trouble with vector images in magnolia.
Not everywhere, but images that go through the imaging module, don't give a result.
This makes sense to me as resizing / optimizing is what this module does and that wouldn't be applicable to a vector (e.g. *.svg)
Is there a way I can configure the imaging module to 'just give back the image' if it's an SVG image?
All documentation seems to point to:
NoOpAssetRenderer
The module magnolia-dam-core provides NoOpAssetRenderer which can be used to define
global AssetRenderer. Per default, NoOpAssetRenderer does only wrap the original Asset.
But I can't figure out how to configure this.
Concrete example, my thumbnails during asset selection give me:
The url for such an image would be
<base-url>/.imaging/thumbnail/dam/<asset-name>.svg
Is there anyone who has made this work?
I am having an issue loading certain SVG files in Fabric.js without grouping its elements.
The screenshots on how the file is displayed on the canvas with and without grouping are shown. The used SVG file is part of the Fabric.js' SVG test collection used at http://fabricjs.com/test/svg_import:
With grouping:
Without grouping:
Both screenshots correspond to what it results when using the Fabric.js' kitchensink. However, I obtain the same results when writing my own program.
I have tried other files and they are shown with no problems whether the grouping is performed or not. Because of this, I suppose the distortions observed for this file on the non grouped version are due to some SVG elements (transformations or groups, perhaps?) that are not very well handled by the library's SVG parser.
Is it possible to avoid this issue under certain conditions? If so, what kind of SVG elements should be avoided to prevent files from presenting this problem?
This is a well known "missing feature" in fabric.js
https://github.com/kangax/fabric.js/issues/1520
The library is not handling very good the object with a "transformMatrix" property set.
the "transformMatrix" property comes from parsing the transform attribute of the elements and the parents elements.
Normally the objects are grouped in a pathGroup object that is capable of handling the transforMatrix and give a correct rendering with the downside effect the objects cannot be moved individually or rotated/scaled.
There is a work in progress about this feature (by me) to solve this but is not complete yet.
You can download and try my branch here:
https://github.com/asturur/fabric.js/tree/experimentalCBox
Is not perfect yet but is gonna be inserted in future fabric version to fix this issue.
Is there any way to protect your sprites on EaselJS?
Currently is too easy to download the sprites.
On chrome just go to console -> resources like this
I made a resarch before i made this answer and found this topic .
That could be very nice. Also we don't need to save the slices in a json like he said, if we have a shuffle seed.
But, i didn't find any thing in nodejs(back-end) to make this image shuffle.
I tried Node GM but its looks too complicaded to bind a image on top of another with (w,h,x,y,offsetX,offsetY)
I know always will have a way to "hack" the resource. But at least offer some difficult.
One of the simple approaches is to encode images to base64, store them as part of Javascript and decode at runtime. See:
Convert and insert Base64 data to Canvas in Javascript
But obviously this will increase download size.
Personally, I would not go this route for "normal" applications or games, unless it is really justified or put on me as an external requirement. For example, one can easily extract assets from the android APK, but this does not seem an area of concern for most of the developers.
The user's browser downloads those images whether you want it or not. Otherwise, they wouldn't be able to display them.
At any given time, any user can just right click on any image on the site and click SAVE AS, you can't stop it, and you shouldn't try.
If you don't want people downloading your work, don't put it on the public facing internet.
I want too build a web application, and I am looking at the tools I will have to use.
I want to use a real time map
I'm a thinking about :
Tilemill to get .png in order to constitue the background of my maps
or get data from a webite in shp files to build layers for this in mapnik.
Mapnik Build layers with the data I want to add on my map.
Mapnik : Put layers together and generate a map.
TileStache : generate tiles for my application.
Openlayers : Display my map with tiles in a browser.
Once my map is displayed, I'd like to add interactivity. For example when you go over a line or a circle (a town/ an event), then it gives you the attributes of this object.
But the lines and circles will integrated dirctly to the mapnik map, so I need to add some javascript to make it dynamic and open a pop-up. How do I do this ? Using Openlayer javascript libraries or node.js.
What is your advice on the question/the way I want to use theese tools?
Thanks a lot!
I'm in a similar situation, so I don't know the answer, but from what I've been able to figure out I think you're on the right track.
I started off using the Mapbox approach, which simplifies things as long as your data is static. You use Tilemill not only to generate your PNG tiles (once you've used Carto to do some nice styling) but also to import your data sets.
TileMill can export your TileJSON and UTFGrid files with the PNG tiles all packaged up and ready to use. Mapbox will then host all that stuff for you, and you can use their mapbox.js library (an extension of Leaflet) to bring it all together in the browser, with full interactivity. Opening popups would be something you'd do in Javascript in the browser - and if you mean infoWindows (the overlay window that's associated with a map point) then that would be a call to the Leaflet API.
If you're happy to create your layers and import your data offline this approach seems to be really simple and powerful; Mapbox will even render out tiles using multiple layers overlaid - so for example you can see your circles on top of a satellite image, merged into a single PNG.
The problem really comes in when your data needs to be live and you can't therefore prepare it all ahead of time in TileMill. I'm still trying to figure this all out but it does seem as though a combination of TileStache and Mapnik would be able to serve you up the TileJSON, GeoJSON and UTFGrid files you'd need as well as the tiles themselves, in the way you've outlined in the question.
You might also want PostGIS and GeoDjango or similar behind the scenes in order to hold and manage your live data, respectively.
As I said, I'm still trying to actually get my full stack working so I can't vouch for this 100% but if your data is gathered upfront then I'd definitely recommend the TileMill route for simplicity's sake.
I hope that's a help!
I need to render Graphviz DOT graphs in a browser. I also need some interactive functionality such as allowing node names to be hyperlinks.
I have tried using Canviz (Javascript renderer), but it doesn't handle large graphs very well. Many of my links also do not work on large graphs.
graphviz can also render .svg files which can be displayed by webbrowsers and can contain links etc
It's not cheap but mxGraph should do what you need.
Otherwise take a look at this question for some other suggestions.
Do you generate the graphs on the server, or are you looking for a client-side solution? If the graphs are generated server-side, graphviz is able to generate html imagemaps. See the example here http://www.graphviz.org/doc/info/output.html#d:imap.
We build this site with a combination of svg (exported from GraphViz) and javascript+svg for the interaction. The highlighting doesn't work in IE, but interaction still does, using imagemaps also generated from GraphViz. I don't know of any off-the-shelf solution.
Maybe give Cytoscape Web a try. Its parent project, Cytoscape, was built to visualize biological networks, but both generalize to any type of network. Cytoscape Web is a separate project that uses Flash as its engine, but is manipulable client-side through Javascript.
Hermann Stamm-Wilbrandt implemented a fiddler on top of
mdaines's compiled-to-javascript GraphViz implementation.