I'm trying to figure out the most lightweight way to collect data for individual mapped polygons from non-technical users. Here's the end vision: users fill out a web form, draw a shape, and then they can easily email their formatted data to me or my colleagues (I know-- the email idea is probably horrifying readers, but I'm working within a lot of restrictive parameters beyond my control. Email is a known quantity.).
Is there a way to strip down something like geojson.io or even just a leaflet map with leaflet.draw and then pass resulting coordinates into text that can be emailed?
Again, my needs are basic. One shape would be mapped at a time. The fewer visual options and controls the better. My audience is largely very non-technical.
It looks like this user was trying to ask the same question, but didn't get far.
Thanks!
A quick proof of concept, adapting code from Leaflet.draw example:
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function(e) {
var layer = e.layer,
popupContent = layer.toGeoJSON ?
JSON.stringify(layer.toGeoJSON()) : "(no data)";
drawnItems.addLayer(layer);
layer.bindPopup(popupContent).openPopup();
});
This converts the drawn item into GeoJSON string, and displays it in a popup bound to the item.
Demo: https://jsfiddle.net/3v7hd2vx/75/
As explained here, you cannot send your geojson data directly but you can let the browser open a mail client with preset data.
var text=JSON.stringify(drawnItems.toGeoJSON());
window.open('mailto:test#example.com?subject=subject&body=' + text);
Here is a full example
Related
I have a new requirement in my AngularJS application. When a new client (patient, in my case) is coming to the medical center for the first time, I must have the possibility to scan his/her ID card, and in this way the admission process can be speeded up, because every data included in the ID card can be automatically read into their corresponding form fields. How can I do this from a computer (not from a mobile device)?
The idea is having this possibility, so the form is automatically completed into my Angular JS form. I suppose every read field should be loaded into a JSON structure (one JSON structure for the whole form). If all data is correct, it is sent to my Node JS backend as usual.
Is it possible to do this in any way? Thank you very much.
Assuming you are using USB scanner you could try something like:
var chars = []
$document.on('keydown', function (e) {
if (e.which === 13) {
//broadcast event
var scannerValue = chars.join("");
console.log('broadcast cpScannerEvent: ' + scannerValue );
$rootScope.$broadcast('cpScannerEvent', { scanner: scannerValue });
//clean buffer
chars = [];
} else {
chars.push(String.fromCharCode(e.which));
}
});
From your comments I'm am assuming that you have a scanner attached to a Windows desktop computer. Typically, those types of scanners have a TWAIN driver to control the scanner from the computer. TWAIN is a message based system and requires a Windows handle. That being said, there is no direct way to access TWAIN devices from within a browser application. However, you can create a service proxy to get around this.
There is a white paper that describes how to develop this type of proxy using LEADTOOLS, a 3rd party SDK: LEADTOOLS HTML5 Scanning White Paper
LEADTOOLS can help you find and extract text, numeric, and date information from any driver's license or identification card, including field like:
Name
ID Number
Address
Gender
Race
Organ donor election
Signature
Date of Birth
Issuing Date
Expiration Date
I would probably process and extract in the scanning proxy on the desktop since you already have the image and you will probably want to return the extracted data as JSON anyway. For more information, check out the LEADTOOLS Driver's License Recognition and Processing SDK page.
If you want to try these things out, you can for free. Technical support is also free and can help guide you through this part of your project.
Disclaimer: I work for LEAD Technologies.
I currently have a section on my website where I ask users to input information on various criteria and the answers get emailed to me (a form with submit button). I would like to add a map to the form in which users can draw shapes such as polygons and circles. Once they submit the form, I would like the map to be emailed along with the other input criteria to me. What is the best code to use?Thank you.
Never too late ...
You can let the browser open a mail client and send the shapes in the body of the mail.
var text=JSON.stringify(drawnItems.toGeoJSON());
window.open('mailto:test#example.com?subject=subject&body=' + text);
Here is a full example
I am writing a Chrome extension using AngularJS to add functionality to the Soundcloud stream page. I want to allow the user to create groups of artists so that they may only see a stream with tracks/shares/playlists from that group of artists.
For example, I follow 500 artists, but I want to quickly see a stream from my favorite 10 artists or from the artists I follow that are on the same label.
I am looking for advice on how I could go about making this as seamless as possible. As of right now, my approach involves getting the tracks with the Soundcloud API and using angular's ng-repeat to display the tracks in a view injected into where the stream normally goes. I realized using the Soundcloud widget was too slow and can't be customized to resemble the native stream items, so I copy/pasted the HTML that an actual stream item uses, but obviously the waveform/comment canvas and button functionality don't work.
What are my options as far as how I can approach this? Am I going to need to write my own players that look like the native Soundcloud ones? Any suggestions would be greatly appreciated.
You should use the SoundCloud API which is very well documented.
If you have already the id's of the tracks / artist, you just have to request the url
GET
http://api.soundcloud.com/tracks/ID_OF_TRACK.json?client_id=YOUR_CLIENT_ID
to get all the informations you need about this track, like the waveform_url, and for the comments you was talking about :
GET
http://api.soundcloud.com/tracks/ID_OF_TRACK/comments.json?client_id=YOUR_CLIENT_ID
To reproduce the behaviour of the comments :
POST http://api.soundcloud.com/tracks/ID_OF_TRACK/comments.json?client_id=YOUR_CLIENT_ID
(with a body param which represents the text and a timestamp in ms since the beginnin of the song, note that you must be connected)
If you don't have the id of the track, you could also use the resolve which give you all the info about a ressource if you have only the URL :
GET
http://api.soundcloud.com/resolve.json?url=https://soundcloud.com/poldoore/pete-rock-c-l-smooth-they&client_id=YOUR_CLIENT_ID
I'm new to Ionic Framework and AngularJs as well.
The app I'm working on has a view where user can search and the results are presented in a list. When the user clicks one of the list items, it navigates to details view. When user presses the "back" button at the header bar, the search text box and results list are empty and he must search again.
What is the recommended approach to, when the user presses the back button from details view, bring the search view populated with the previous search term and results? (would be nice to have the scroll position restored as well)
I know I can just store this information into some service, but this sounds like a lot of work.
Are there any other cool stuff like a view state service or something that can do this for me?
I know I can just store this information into some service, but this
sounds like a lot of work.
really?
app.factory('searchData', function() {
return {
searchTerm: '',
results: []
};
});
that's how it's done. But it sounds like what you're really looking for is a cure for laziness...
I have very recently been assigned to an EPiServer project. I'm .Net developer however, I had never had a pleasure of actually working with ES.
I have been given a task of creating a soft "integration" with SoundCloud. Our users would like to copy/paste URL to a SoundCloud song - which then I can use their API to actually get all information of the audio. (title, description, tags etc).
So what I have created so far
SoundcloudPageType (contains simple properties like title, description, duration etc.)
I have written little POC for Soundcloud API that gets me all information and deserializes it into object.
What I need now is a bridge between those two. I thought that creating something like "PageLinkReference" where you can click [...] button which would then ask you for "URL to SoundCloud audio", once person enters that I would do a REST api call to pre-populate all other properties on the page.
Now, this is just an idea. I would like to run it past you guys to see if
It is possible.
What is the best way of doing this and are there any tutorials that do something similar.
I do not want to hack and slash my way through EPiServer but to utilise what EPiServer might already provide.
I would add a short string property to the SoundcloudPageType and let the users paste into that field.
If you are using PageTypeBuilder something like this:
[PageTypeProperty(
EditCaption = "Soundcloud Url",
Type = typeof(PropertyString),
SortOrder = 2010,
UniqueValuePerLanguage = false,
Searchable = true)]
public virtual string SoundcloudUrl { get; set; }
Then you could either fetch "on request" or fetch and store (easiest on other properties you've added) in one of EPi's save events. Take a look at Joel's article of common patterns when integrating with EPi:
http://joelabrahamsson.com/episerver-integration-patterns/
You could use the oEmbed dynamic content plugin, which should support soundcloud
http://nuget.episerver.com/en/?search=oembed&sort=MostDownloads&page=1&pageSize=10