Need to outline several contiguous areas on map - polygon

I am working with maps that are based upon the lot and block survey system. So, for example, my house could be a parcel identified by block 34, lot 2. For every block, there are usually multiple lots and they are all within the same contiguous area. My users can query for block and lot, and the map will zoom in and display that exact block/lot and outline it. What they want to do is to show all lots for a specified block and draw an outline around the entire block.
I can use the JavaScript API and QueryTask execute() method to get all of the lots/features for a block. However, I do not know if there is a way to aggregate the feature data such that I can calculate and draw a border surrounding them all.
I have tried the executeForExtent() method and it works, but the extent, of course, is a rectangle, which means that while the outline will encompass all of the lots, the edges will have partials of other blocks and lots.
I know it's possible because I have seen it, but I do not have access to that code or the folks who developed it.
Does anybody know of a way to create an outline such as the one I'm describing?
TIA

I think you're looking for a way to calculate a convex hull which you can do with the geometry engine in the ArcGIS API for JavaScript. See https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-geometryEngine.html#convexHull
Update: or maybe better the union method as suggested by #cabesuon in a comment below. Same basic principle - use the GeometryEngine :)

Related

Damaging QR Codes to Create Circles: Are Corners Necessary?

I am trying to create a circular QR Code. I understand that the typical circular codes require customer readers (Facebook, Kik, TikTok, ShotCode, etc.), but I would like this code to be able to be read by standard devices (ex.: the built-in reader in iOS devices).
I have looked at a stack of reference materials, including:
How can I generate a circular qr-code like a messenger or a kik code?
Generate circular qr-code like a messenger or a kik code using Python
Generate QR codes missing the corner
I've also dug into the (really in-depth) tutorial at thonky.com, and tried to create my own:
From what I can tell, I've kept the finder patterns, the alignment pattern, the timing patterns, the separators, and the dark module intact (see details here). But still no love when I try to read it.
Admittedly, I've taken an existing code (it contains the URL 'https://www.stackoverflow.com') and just chopped off the corners to make it fit. So my assumption is that I've damaged the code enough that the error correction isn't working.
But, would this work at all anyway? If I figured out how to encode it correctly, would it work without the corners? Or is this a useless endeavor to start with?
There is a basic structure for QR codes with specific elements that take part in the decoding process. Some of them are the alignment, the timing pattern, and the finder pattern. One of the elements which seems to be missing is the quiet zone. It's used to separate the code from other objects and surrounds all the data including structuring elements in the code. Have a look on the outer side of codes here and notice the difference. Also, if you look at the points that represent your data cells, some of them partially exist. In other words, some half and quarter circles exist and others are unknown behind the outer frame of your code design. How would it be figured out if it's black or white to be used for decoding? This is the problem. Please check this image to see how data look missing when you crop it with the circle.
Also, if you use any regular QR coder reading application, you will notice that circular QR codes require custom readers. So, the answer to your question is yes. The corners are necessary if you don't use a custom reader and if data exists on them.
If you are interested in academic research details, see this. I hope my answer helps you. :)

JavaFX Game Issues with wall boundaries

I am having trouble getting my simple JavaFX Maze Game to work. I just wanted to do this to test how much I knew, and I have gotten almost to the end.
All I want to do now is see if there is a way for me to combine all of the Rectangle2D Boundaries into a single bounding shape for me to do collision detection with.
Right now, I have maze walls set up like
this, and I have to check for collision against every single one of the wall objects, which I have contained in a list.
What I want to know is there anyway of turning that into a single shape that I can check collision against. That would make my job so much easier when it comes to finishing my game.
EDIT 1: The red boxes in the image are just there to represent the Rectangle2D bounding boxes. They will not actually be there in the final product.
EDIT 2: All of these have been created using a simple black square sprite, and all of the bounding Rectangle2D boxes are using the javafx.geometry package, not the javafx.scene.shape package.
Any help would be appreciated. Thanks in advance!
Do you mean union many shapes into one?
Thanks to the help of the comment thread on Powercoder's answer, I was able to get it figured out. Instead of using javafx.geometry classes, I was able to switch to javafx.scene.shape classes, which allowed me to finish everything I was trying to do.
Here is my old code: https://pastebin.com/1DBXuq79
and here is my new code: https://pastebin.com/uXTrcsZ2
For anybody who wants to compare and figure out how I changed it.

Archilogic material preset choices in 3d.io viewer

I would like to create a web app that lets the user choose between different presets for floors and walls in an archilogic 3D scene.
https://spaces.archilogic.com/model/template/new?modelResourceId=f67ffde0-278e-11e4-9f8c-7dda0d61ae4a&mode=edit&view-menu=camera-bookmarks&main-menu=interior&logo=false
Just like in this editor, however, I need the materials menu to be simpler (user chooses from different preset textures which were uploaded earlier by the admin with the corresponding diffuse, spec, normal, and alpha maps).
I was browsing through all the repos of archilogic but couldn't find the source code of the 3D editor in order to make it simpler.
Does anyone know if it's available, if not, which direction should I be headed in order to develop such an app?
This is a feature that still is on the roadmap and not done yet, but there are ways to accomplish something similar.
So above all, the following description is due to all this not being ready and polished yet. It's an experimental way of getting to your goal.
Let's break this down.
Predefined materials
Archilogic has a long list of pre-defined materials right now that you can pick from. They're agnostic to the type of architectural element, so you can use any material on any element. Here is the list of available materials.
Floor & ceiling
Floors and ceilings are contained in a single element with an io3d-floor component.
So assuming you've got your floor and ceiling in the elem element, you can do the following to select a pre-defined material:
elem.components['io3d-floor'].data.material_top = 'wood_parquet_oak';
elem.components['io3d-floor'].update()
this will change the floor material to the given pre-defined material, in this case "wood_parquet_oak". For the ceiling material, change material_top to material_ceiling.
Walls
Walls work pretty much the same, but the properties are material_front and material_back instead of material_top and material_ceiling.
Other architectural elements
For other elements, you can probably work it out by looking what is available as properties in .data of the associated component (e.g. io3d-wall for walls).
Custom materials
This is a little harder to get right as there's a bunch of properties involved in making a custom material.
Assuming you have uploaded textures somewhere, you'd define the material like this:
elem.components['io3d-floor'].data.material_top = {
mapDiffuse: "https://example.org/texture.hi-res.gz.dds",
mapDiffusePreview: "https://example.org/texture.lo-res.jpg",
mapDiffuseSource: "https://example.org/texture.source.jpg"
}
You can also give it additional parameters, such as size: [3,3] scaling the texture to cover 3x3 meters in the model before repeating itself or passing normal maps or specular maps, but I exclude these for brevity.
Note: You can use this kind of material definition for anything that also accepts the pre-defined materials mentioned above. It's important to follow the naming convention and you need to have a gzipped DDS texture available as well as JPEG versions.
The 'Source' image is optional, but the other two have to be present or it won't work.
Summing it up: This functionality isn't fully ready yet (as you can tell by the quite contrived way of getting this to work) but this workaround will do until a better way is going to be available.

cytoscape: Dagre-layout prevent nodes from laying on edges

I am using cytoscapejs with dagre layout (https://github.com/cytoscape/cytoscape.js-dagre). I am very happy with this extension, however, there is one problem I am struggling with. In particular, I would like to prevent that nodes are allowed to lay over edges. Because of that, there are some examples where one cannot distinguish between an edge from a node to a successor and an edge from the successor of the particular node to the succeeding node. There is also an open issue regarding this misbehavior (https://github.com/cytoscape/cytoscape.js/issues/1078)
I allready tried out other curve-style layouts such as 'segments' and 'haystack' but unfortunately without success.
Does anyone of you have an idea how to do that?
Thanks in advance
Andy
You'd have to convert the points that Dagre gives you into segment values. You could put those values in .scratch() to be used in a mapper.
See https://github.com/cytoscape/cytoscape.js-dagre/issues/5
There are a lot of things in the queue for Cytoscape and the extensions, but unfortunately time and resources are constrained and this feature request is relatively low priority. You're welcome to make a pull request on the extension if you'd like to use the feature.
Thanks

Where to start with map application [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
i'm trying to desing a new application which allow user see he/her current location on a custom map (office, university compus, etc). but actually i have a couple of question in my mind (i haven't designed this kind of application before). i'm wondering:
How can i draw my own maps, what is the best option for it? there any format that i have to care of, there are any specification about it ?
Once i have my custom map. how can i do to mapping a global position system with the local positions ?
What are the tricks behing zoom on maps ? just differents layers with more or less informations and those layers changes on users demand ?
If a whant to mark some specific points over the map, like a cafeteria, boss's office etc, how can i do that ?
Sorry if my questions are too much generics and dumb, but i really need some clues about this topic because i don't have any idea how to design this kind of application as best as possible. and we don't whant to reinvent the wheel.
I will appreciate any help that you can provide me in order to desing this application
There are a number of approaches you can take to creating a maps application. Which one you use depends on the set of features you want to support, and the degree of control you want to maintain over the product.
If you want something like an embedded google map, then clearly the JavaScript Google Maps API may be best solution. If you need to support further features from the server side, like directions, you can make use of the web services api:
http://code.google.com/apis/maps/documentation/webservices/index.html
If, on the other hand, you essentially need a zoomable map of an area that you can define with markers and borders drawn from your database, and you want complete custom control over this image without having to rely on Google Maps' data or branding, then you can fairly easily build a scalable image either on the client or server, or both.
To start, you will need a set of point coordinates from which to draw your map. These can be derived from the SVG generated by a program like Adobe Illustrator when you draw vector graphics. Thus you could draw your own map in Illustrator and use the generated svg to create your map. In this case you will have to read about SVG and understand how to use it. Raphael.js is an excellent library that offers cross-browser compatible handling of SVG. If your map is of a familiar region, such as a country, you may be able to find SVG coordinates for it already on the web. You could start by grabbing a subset of the data in this file on wikipedia for the country or region you want to map.
Once you have a set of coordinates that define your map areas, you can keep them in a config file that can be read into memory from disk by your application as needed. It's convenient to save this data in the form of a hash, where each set of key-value pairs stores a separate svg 'path', or set of point coordinates that forms a closed shape. These could represent, for instance, the counties in a state.
Once you have the appropriate 'paths' stored in this manner, it is relatively easy to write a wide variety of software implementations.
Check out the imagemagick convert
documentation for the -draw
option for an example of how to
draw a png, jpeg, or gif on your
server from your stored svg paths.
Adam Hooper has some brilliant ideas of what to do with a custom map using SVG on the client side:
http://adamhooper.com/eng/articles/9
Note that you do not necessarily
need to use SVG. Here's an
example of a map drawn on the
server using ImageMagick, with a
highlightable clickmap drawn over it
by the browser, where the
highlighting is handled by the
jquery maphighlight plugin, which
uses the canvas element where it is
supported and VML in its place on
Internet Explorer browsers. All of
these layers (ImageMagick,
client-side click-map, and
client-side javascript highlighting)
are built with straight lines drawn
between point coordinates, so none
of this is actually SVG, and may be
easier to understand. Have a look
at the page source to see how the
click map is drawn, then look at the
maphighlight plugin to understand
what's going on:
http://davidlynch.org/js/maphilight/docs/
A third option, if you need to support more google-maps-like features, but want to add your own map data without using an overlay, is to implement some application of Open Street Maps. If you go to openstreetmap.org, find the area you want to customize, and click the edit tab at the top, you can edit the map as needed for your area. This edits the map data for all users of the Open Street Map service. Then you can get the openlayers javascript from http://openlayers.org/ to render a map on your website from Open Street Maps data that you can freely edit yourself. Also see the OpenStreetMap Wiki that tells you more about the OpenStreetMap movement.
If you don't want to reinvent the wheel, then don't try do do it: take the Google Maps API, add some markers and you're done. Zooming included. They have examples to guide you and there's loads of knowledge about the usage.
All you need is a free API key.
Edit: Your comment in the original question indicates that you want to use a custom overlay over existing maps. That's also possible as this example shows (see docs for custom overlays).
In the effort to not reinvent the wheel (which is definitely a good idea), much of the work of the maps themselves has already been done. The simplest approach will be to integrate Google Maps into your application. To address your individual points:
You don't have to draw your own maps. Tons of them already exist. Unless you're asking about drawing maps of indoor facilities yourself and plotting on those? In which case, how do you plan to approach this from a hardware perspective? GPS won't work well.
You need a piece of hardware that supplies the GPS coordinates. From there, you can just call the API to plot it.
Already done.
Calls to the API. Just provide the location (address, GPS, whatever you have) to the API. GPS will be more accurate, of course. But I'm pretty sure there's a geolocation service as part of the API and you can store the coordinates locally and adjust them manually if they're inaccurate.
If I'm off-base from your actual idea here, let me know. "Maps" is, of course, vague.

Resources